Dynamic bootstrap carousel with thumbnail navigation in PHP and Bootstrap

Question

I want to make a dynamic bootstrap carousel with image thumbnails at the bottom. I went through several code snippets and answers which seems to be working in their demo and experimented those codes. I just got the code in this link working but the thumbnail was too small. Here are the functions I wrote to make dynamic carousel...

//make image thumbnails
function make_image_previews ($con){
    $output = ''; 
    $count = 0;
    $result = make_query($con); //returns the images in database
    while($row = mysqli_fetch_array($result)){
        if($count == 0){
            $output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'" class="active"> 
            <img class="d-block w-100 img-fluid" src="'.$row['image'].'">
            </li>';
        }else{
            $output .= '<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'"> 
            <img class="d-block w-100 img-fluid" src="'.$row['image'].'">
            </li>';
        }
        $count = $count + 1;
    }
    return $output;
}

And here is the html output in page source

<div class="row">
    <div class="col-md-12">     
    <div id="dynamic_slide_show" class="carousel slide light-shadow carousel-fade carousel-thumbnails" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
          <div class="carousel-item active">
              <img src="upload/protected_matrix-background-style-computer-virus-hacker-screen-wallpa-wallpaper-green-dominant-color-format-121069553.jpg" class="d-block w-100" />
          </div>
          <div class="carousel-item">
                <img src="upload/protected_photo-1515879218367-8466d910aaa4.jpg" class="d-block w-100" />
           </div>
           <div class="carousel-item">
                <img src="upload/protected_UC-b6b17814-ad20-4509-8102-4efa70f6ee67.jpg" class="d-block w-100" />
           </div>    
       </div>
    <a class="carousel-control-prev" href="#dynamic_slide_show" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#dynamic_slide_show" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!--Carousel image preview-->
    <ol class="carousel-indicators">
        <li data-target="#dynamic_slide_show" data-slide-to="0" class="active"> 
            <img class="d-block w-100 img-fluid" src="upload/protected_matrix-background-style-computer-virus-hacker-screen-wallpa-wallpaper-green-dominant-color-format-121069553.jpg">
        </li>
        <li data-target="#dynamic_slide_show" data-slide-to="1"> 
           <img class="d-block w-100 img-fluid" src="upload/protected_photo-1515879218367-8466d910aaa4.jpg">
        </li>
        <li data-target="#dynamic_slide_show" data-slide-to="2"> 
          <img class="d-block w-100 img-fluid" src="upload/protected_UC-b6b17814-ad20-4509-8102-4efa70f6ee67.jpg">
        </li>    
    </ol>
  </div>                
  </div>
  </div>
<hr>

There was a question with the same problem but the code was different to what I have provided in the link at top. I tried the answer changing the code but I was able only to see the three underlines. How can I solve the problem of small thumbnails in my code?

EDIT When I tried the CSS

.carousel-indicators {
  position: static;
}
.carousel-indicators>li {
    width: 100px
}

the thumbnail overflows onto the next row. As in following picture, horizontal line, ( <hr> tag) is on the end of the row where the carousel is present

Answer 1

Here is an example jsfiddle: https://jsfiddle.net/setw7kn0/

You can set the images width by changing .carousel-indicators > li to whatever you want (in the example i have used 100px ). Also the position: static; in .carousel-indicators is to make the thumbnails stop overlapping the carousel .

Tell me if this is what you were looking for.

EDIT:

Well the reason that .carousel-indicators is overlapping the hr it's because hr shouldn't be placed directly inside .row , instead should be either inside a column inside a row or after the .row closing tag.

Also i have changed the .carousel-indicators > li height to auto so that you override the defaults bootstrap css, the default value of bootstrap is height: 3px; (so you are actually fighting bootstrap).