How can I load image url from database to bootstrap thumbnail - php

Question

I just got into bootstrap recently before I only worked with normal html,php ,css code
tbh I'm too scared of using bootstrap I'm trying to create e commerce website and I add all my works on html and decided to switch and transfer my php/sql code and apply it using bootstrap I have two questions:
is it hard or complicated to move my php/sql code and apply it to another pages in bootstrap
how can I load url data from mysql into my thumbnail (image, product info..etc)
I apologies for using the snippet I tried to insert the code using ctrl -k but the format is messy
<div class="container">
<div class="row text-center">
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6 hidden-lg hidden-md hidden-sm">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
</div>
<div class="row text-center hidden-xs">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="400X200.gif" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

bootstrap is just css and javascript although the html markup can be much more than you are used too. If you have done it before without using bootstrap then you already have your answer because the process is the same. Just add
on the thumbnail 'img' tag 'src' attribute

Answer 2

Use like this it may work for you.
<div class="container">
<div class="row text-center">
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
$sql = "SELECT image_path FROM tbl_name";
$result = $conn->query($sql);
while($row = $result->fetch_assoc())
{
?>
<div class="col-sm-4 col-md-4 col-lg-4 col-xs-6">
<div class="thumbnail">
<img src="<?=$row['image_path']; ?>" alt="Thumbnail Image 1" class="img-responsive">
<div class="caption">
<h3>Product</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p> View
</p>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>

Answer 3

Is it hard or complicated to move my php/sql code and apply it to another pages in bootstrap?
No it is not hard or complicated at all. Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive sites. Just you should learn basics.
How can I load url data from mysql into my thumbnail (image, product info..etc)
Hope you know basic select query. By using select query fetch image path and display path in img src. It will work perfectly.