responsive image and text within border - html

Question

Having problem styling the border.
What i want to achieve
What i have now
HTML codes
<div class="container">
<div class="col-sm-12 row">
<div class="col-sm-2 thumbnail">
<img class="img-responsive" src="images/ac/row_ac001_m0.jpg">
<div class="caption">
<p align="center"><b>Model No.Row-AC-001</b></p>
</div>
</div>
<img class="col-sm-2 img-responsive" src="images/ac/row_ac002_m0.jpg">
<img class="col-sm-2 img-responsive" src="images/ac/row_ac003_m0.jpg">
<!---continues------>
</div>
</div>
My CSS
.thumbnail {
border:1px;
width:15%;
border-style:solid;
}

Answer 1

.thumbnail{
border: thin gray solid;
border-radius: 0px !important;
margin: 0 5px;
}
.image_size{
width: 150px;
height: 150px;
display: block;
}
p{
font-size:12px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 ">
<div class="thumbnail">
<img src="http://isomerica.net/~mlah/art/photos/small.nature.puffball.jpg" class="img-responsive image_size">
<p class="text-center">Your Text</p>
</div>
</div>
</div>
</div>
PS: Change your image size as per your need.
Here is JSFiddle
Hope this helps.

Answer 2

Based on the photos you provided.
The wider the screen, the more items per line.
.myitem {
display: inline-block;
width: 200px;
max-height: 310px;
border: 1px solid #fff;
}
.mycoolcontainer,
.myitem {
margin: .4em;
}
img,
.mycoolcontainer,
.myitem {
max-width: 100%;
}
body {
background: #131418;
color: #999;
text-align: center;
}
<div class="mycoolcontainer">
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
<div class="myitem">
<img src="http://placehold.it/200x200">Title
</div>
</div>

Answer 3

I have changed your code and appended below. I hope this will help you to solve your problem.
The formation should be like this, the grid size based on your requirement. You can change the grid size.
HTML
<div class="row">
<div class="col-sm-2 col-md-2">
<div class="thumbnail">
<img src="https://cdn.pixabay.com/photo/2016/12/22/05/41/muang-sing-historical-park-1924558__340.jpg" alt="...">
<div class="caption">
<p class="text-center">Row-AC-001</p>
</div>
</div>
</div>
CSS
.thumbnail img {
max-width: 150px;
}
.thumbnail .caption {
padding-top: 9px;
}
Codepen link attached,
http://codepen.io/WebTechie/pen/vyMqdY

Answer 4

use html this way:
<div class="container">
<div class="row">
<div class="col-sm-2">
<div class="thumbnail">
<img class="img-responsive" src="images/ac/row_ac002_m0.jpg">
<div class="caption">
<p align="center"><b>Model No.Row-AC-001</b></p>
</div>
</div>
</div><!-- First col -->
<div class="col-sm-2">
<div class="thumbnail">
<img class="img-responsive" src="images/ac/row_ac002_m0.jpg">
<div class="caption">
<p align="center"><b>Model No.Row-AC-001</b></p>
</div>
</div>
</div><!-- Second col -->
</div>
</div>
Use CSS:
.thumbnail {
border:1px solid #ccc;
}