Hi guys I need help in organizing a group of images using the bootstrap grid layout.
In the image there is the result I want reach: https://i.stack.imgur.com/RuJud.png
My code produces this result: https://i.stack.imgur.com/ZDa2Z.png
The position of the images is wrong, can you help me watching my code?
<div class="container">
<div class="row game-group-titles">
<div class="col-md-6">
<h4>GIOCHI PREFERITI</h4>
<div class="row">
<div class="col-md-12 giocogrosso">
<img src="../lggioco.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<h4>CURRENTLY PLAYING</h4>
<div class="row">
<div class="col-md-12 giocogrosso">
<img src="../lggioco.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
<div class="row">
<div class="col-md-6 giocopiccoloo">
<img src="../giocoo.png" alt="">
</div>
<div class="col-md-6 giocopiccolo">
<img src="../giocoo.png" alt="">
</div>
</div>
</div>
</div>
</div>
Not sure if this is what you were looking for
.row {
background: blue;
max-width: 410px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col, > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
<h4>GIOCHI PREFERITI</h4>
<div class="row no-gutters">
<div class="col-12 giocogrosso">
<img src="http://via.placeholder.com/410x190" alt="">
</div>
<div class="col-xs-6 giocopiccoloo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
<div class="col-xs-6 giocopiccoloo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
<div class="col-xs-6 giocopiccoloo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
<div class="col-xs-6 giocopiccolo">
<img src="http://via.placeholder.com/205x95" alt="">
</div>
</div>
Related
I have been learning this design
<section>
<div class="container">
<div class="row">
<div class="row">
<div class="col-lg-12 col-md-12">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<img src="image.png" alt="" class="img-fluid">
</div>
<div class="col-lg-6 col-md-6">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</section>
I am getting the below design
Could you please help me on this design and let me know where am i going wrong?
Thank you
<section>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<img src="image.png" alt="" class="img-fluid">
</div>
<div class="col-lg-6 col-md-6">
<div class="row">
<div class="col-lg-12 col-md-12">
<img src="image.png" alt="" class="img-fluid">
</div>
<div class="col-lg-12 col-md-12">
<img src="image.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</section>
I'm creating a grid to display images of a team. I have a grid of images and I need to position my bottom 2 images below the top 2 middle images - basically centralizing the bottom 2. How can I achieve this? I've added my HTML and CSS below. Any help will be appreciated. Thanks.
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
Done. Just need to add text-align: center; , see the example below :D
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
text-align: center;
}
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="~/Content/Images/t1.jpg" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="~/Content/Images/t1.jpg" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
Try to add these rules display: flex; and justify-content: center; to .team-row class like below
.team-row{
display: flex;
justify-content: center;
}
Run the Code snippet bellow :
.team-row{
display: flex;
justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
you can try adding this:
.team-grids {
margin: 0 auto;
}
edited: my bad, pls try this one.
add justify-content-md-center
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="row team-row justify-content-sm-center">
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
.team-grids .team-img {
overflow: hidden;
position: relative;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="team">
<div class="container">
<div class="w3l-heading">
<h3>Our Team</h3>
</div>
<div class="team-row row justify-content-center">
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Edwards Doe</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 team-grids">
<div class="team-img mx-auto">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="">
<div class="captn">
<div class="captn-top">
<h4>Mark Sophia</h4>
<p>description</p>
</div>
</div>
</div>
</div>
</div>
</div>
Three changes to your code:
1) Add class row and justify-content-center alongwith team-row. Columns are always used in combination with rows in Bootstrap.
2) Add class img-fluid, because img-responsive is a Bootstrap 3 class which is changed to img-fluid in Bootstrap 4.
3) Add class mx-auto to team-img in case you need to center the image in column. For text, you can use text-center.
I need to made this div in bootstrap 3 as shows in image...
I need to display 4 icons/images in one row and another 4 icons in another row in smaller screen/mobile view..i dont know any error in my code..
please help me to make this as shown as in image.
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="col-md-2"></div>
<div class="col-md-1 text-center ">
<div class="im1">
<img src="/images/speaker.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Sound insultion</h6>
</div>
</div>
<div class="col-md-1 text-center" >
<div class="im1">
<img src="/images/renewable-energy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Save energy</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/window.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Prevent Dust Buildup</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/stormy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Storm Resistant</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/umb.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Blocks Seepage</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/sun.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Thermal Insulation</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/maintenance.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Low maintenance</h6>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</section>
styles
.im1{
padding-top: 8px;
padding-left: 8px;
}
.siz{
width: 40px;
}
.textt{
font-size: 15px;
color:#ffffff;
font-family: 'Times New Roman', Times, serif !important;
}
Here is the image
how to make this image using bootstrap grid system...
I created a code for you. I hope it will help to you.
https://codepen.io/myco27/pen/OvMdGp
img{
width: 100%;
}
.img1{
width: calc(100% / 8);
float:left;
}
#media (max-width: 860px) {
.img1{
width: calc(100% / 4);
float:left;
}
}
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
</div>
</section>
First bootstrap runs in a 12 grid sysytem that is defined or can be broken down into 2,3, or 4 segements...basically any divisor of 12. In your case, to get the first four images in a row (in a small device), we split the grid by 3 i.e "col-md-3" for each image wrapper and "col-lg-1" (for large devices) e.g using a snippet from your code
<div class="col-lg-1 col-md-3 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
Then avoid splitting the grid at the main <div class="col-md-2"></div> wrapper, simply leave it as <div class="row justify-content-md-center"></div>.
This should work just fine.
NB: The number of images willbe only 8 in this container
For Your CSS is simply modify the following
.siz{
width: 100%;
}
Try This. it has 8 div in 1 row. as shown in image
<style>
.main{
background:#034da2;
}
</style>
<div class="col-md-12 main">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
</div>
</div>
</div>
Im trying to make images resizable/responsive and Ive been trying everything-setting the image surrounding div to a par. size in px and giving the images a percentage as well as all kind of other things like min/max-width, looked up solutions online etc but nothing works. Any ideas?
html:
<section id="skills" class=" skillsSection">
<div class="container">
<div class="row skillsHeader">
<div class="col-lg-12 text-center">
<div class="vertical">
<h3 class="H2">
<span>SKILLS</span>
</h3>
</div>
</div>
</div>
<div class="row skillsRow">
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
<div class="col-md-3 skills-item wow zoomIn">
<img src="images/..." class="img-responsive" alt="">
</div>
</div>
</div>
</section>
css:
skills-item img {
width: 50px;
}
.img-responsive{
width: 100%;
height:auto;
}
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;
}
.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.
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>
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
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;
}