Bootstrap thumbnail min width - html

Question

Please see the images below
I am using bootstrap thumbnails. When i reduce my screen size using chrome's inpscet element, i get thumbnails as in image1, on further reducing i see the "Go to Page" and "View Details" buttons disorient. When i further reduce the screen size, number of images in a row reduces and again the buttons are aligned properly as in image3.
Please help me to increase the minimum width for my thumbnails which will lead me from image1 to image3... that is prevent dis-orienting the button positions.
here is the code for page content
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Home</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<style>
.thumbnail{
// min-width: 240px;
}
</style>
<!-- /.row -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Recently added
</div>
<div class="panel-body">
<div class="row">
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Go to page View Details</p>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Go to page View Details</p>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Go to page View Details</p>
</div>
</div>
</div>
<!-- </div>
<div class="row">-->
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Go to page View Details</p>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Go to page View Details</p>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Go to page View Details</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Top courses
</div>
<div class="panel-body">
List top uploaded courses
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->

Answer 1

Bootstrap detects the browser window size to do the adaptation. Because the inspector goes inside the browser window when docked it will break you css layout.
To solve this you can create a new css class with bigger min-width property.
.my-thumbnail { min-width: 300px !important;} and add this css class to your thumbnail html element. Add important to override existing min-width.
Remember you'll have to do different ones for each of the screen sizes. You'll probably have to play with the size of the cols where the thumbnails are inside too.

Answer 2

You reduce browser to some height and width through browser console. Bootstrap responsiveness works on media queries, wherein, they will be setting relative values to respective elements based on min-width and max-width for screen. So it's like if it is between a range of value, then the particular styles gets applied. To know exactly how good the responsiveness is you need to use mobile emulator present in chrome browser.
So for example, if you see below media query
#media (min-width: 767px){
//some styles for grid where width=600px
}
#media (min-width: 1200px){
//some styles for grid where width=900px
}
Then until 768px of screen width the width of grid will be 900px and once it drops down it will reduce to 600px.
Conclusion
Since the screen width will be fixed for different devices and won't be between any irregular values, you should test the responsiveness either with the real devices or with the browser emulator which is shown in above image