Look At This Fiddle
The Code:
<div class="col-md-12">
<fieldset>
<legend>Aplikasi Intranet</legend>
<div class="row">
<div class="col-xs-3 col-sm-1">
<a style="margin-bottom:0;">
<center>
<img width="64" height="56" src="http://placehold.it/200x100" class="img-responsive" style="margin-bottom:0;"/>
<b>Mail</b>
</center>
</a>
</div>
<div class="col-xs-3 col-sm-1">
<a style="margin-bottom:0;">
<center>
<img width="64" height="56" src="http://placehold.it/200x150" class="img-responsive" style="margin-bottom:0;"/>
<b>Mail Bla Bla Bla</b>
</center>
</a>
</div>
<div class="col-xs-3 col-sm-1">
<a style="margin-bottom:0;">
<center>
<img width="64" height="56" src="http://placehold.it/200x165" class="img-responsive" style="margin-bottom:0;"/>
<b>Mail Mail Bla Bla Bla</b>
</center>
</a>
</div>
</div>
</fieldset>
</div>
With various image height, How to make the caption stay on the same line? (The Spacing responsively refer to highest image)
Expected Layout:
You could wrap your img in a container, and set a height on this container :
<a style="margin-bottom:0;">
<center>
<div class="img_container">
<img width="64" height="56" src="http://placehold.it/200x100" class="img-responsive" style="margin-bottom:0;"/>
</div>
<b>Mail</b>
</center>
</a>
.img_container {
height: 56px;
}
Updated fiddle
EDIT :
To get an alignment with dynamic height, you may rearrange your HTML structure :
<div class="row">
<div class="col-xs-3 col-sm-1">
<a href="#"><center>
<img width="64" height="56" src="http://placehold.it/200x100" class="img-responsive" style="margin-bottom:0;"/>
</center></a>
</div>
<div class="col-xs-3 col-sm-1">
<a href="#"><center>
<img width="64" height="56" src="http://placehold.it/200x150" class="img-responsive" style="margin-bottom:0;"/>
</center></a>
</div>
<div class="col-xs-3 col-sm-1">
<a href="#"><center>
<img width="64" height="56" src="http://placehold.it/200x165" class="img-responsive" style="margin-bottom:0;"/>
</center></a>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-1">
<a href="#"><center>
<b>Mail</b>
</center></a>
</div>
<div class="col-xs-3 col-sm-1">
<a href="#"><center>
<b>Mail Bla Bla Bla</b>
</center></a>
</div>
<div class="col-xs-3 col-sm-1">
<a href="#"><center>
<b>Mail Mail Bla Bla Bla</b>
</center></a>
</div>
</div>
JSFiddle
Related
I want to show 5 images in one row.So one row 5 column
for 5 column I find this css
.col-half-offset {
margin-left: 4.166666667%
}
this is work for web but for mobile it does no show correctly although I added responsive attribute to my img element,what is problem with this ?
here is my
css
.col-xs-2 {
/*background:#00f;
color:#FFF;*/
}
.col-half-offset {
margin-left: 4.166666667%
}
and here is my html
<div class="row">
<div class="col-xs-2 ">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col-xs-2 col-half-offset">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 9001-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
<div col-xs-12 class="caption">
<p>ISO 9001:2015 Kalite Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col-xs-2 col-half-offset">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 14001-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" class="img-responsive" alt="Lights">
<div col-xs-12 class="caption">
<p>ISO 14001:2015 Çevre Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col-xs-2 col-half-offset">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 27001-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive">
<div col-xs-12 class="caption">
<p>ISO 14001:2013 Bilgi Güvenliği Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col-xs-2 col-half-offset">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/OHSAS 18001-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-responsive" style="width:100%;height:100%">
<div col-xs-12 class="caption">
<p>OHSAS 18001:2007 İş Sağlığı Güvenliği Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
</div>
How about this:
In Bootstrap 4, For Responsive Image you have to use img-fluid not img-responsive
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="thumbnail">
<a href="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" target="_blank">
<img src="http://psldanismanlik.com/Upload/ISO 1002-1.jpg" alt="Lights" class="img-fluid">
<div col-xs-12 class="caption">
<p>ISO 1002:2014 Müşteri Memnuniyeti Yönetim Sistemi.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/ilazycoder/9xuym2kj/6/
I want to design like this in bootstrap css , picture
What i have tried is
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="img1.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img3.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img5.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img2.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img4.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img6.jpg">
</div>
</div>
The height of images img1.jpg,img4.jpg,img5.jpg need to increase as shown in image attcahed,
Is there any Experts in CSS?
Add the .img-fluid class to each of your images so they scale with the parent div's. That should work.
https://getbootstrap.com/docs/4.0/content/images/#responsive-images
You can achieve the desired layout with modification on your html code. Try this code.
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="img1.jpg">
<br>
<img class="img-responsive" src="img2.jpg">
</div>
<div class="col-md-6">
<img class="img-responsive" src="img3.jpg">
<br>
<img class="img-responsive" src="img4.jpg">
</div>
<div class="col-md-3">
<img class="img-responsive" src="img5.jpg">
<br>
<img class="img-responsive" src="img6.jpg">
</div>
</div>
I used the Bootstrap Grid format so that I would be able to align my images but for some reason it isn't working. they are all in one like to the left as if i had set them as blocks and it won't work if i give their positions as inline-block either. How will I be able to edit it so that my 5 images will have a responsive grid format?
<div id="section2" class="container-fluid">
<h2>The Members</h2>
<h3 id="hoverovertext">(Hover-over each member to learn more)</h3>
<div class="row1" width="100%">
<div class="members col-md-4" id="ohno" height="225px">
<img src="images/ohno.jpg" class="images" height="225px">
<span class="text">Satoshi Ohno(Leader)<br>Birth: 26-11-1980, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1994</span>
</div>
<div class="members col-md-4" id="sakurai" height="225px">
<img src="images/sakurai.jpg" class="images" height="225px">
<span class="text">Sho Sakurai<br>Birth: 25-01-1982, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1995<br>Graduated Keio University</span>
</div>
</div>
<div class="members col-md-4" id="aiba" height="225px">
<img src="images/aiba.jpg" class="images" height="225px">
<span class="text">Masaki Aiba<br>Birth: 24-12-1982, <br>Chiba (Jpn)<br>Joined "Johnnys" in 1996</span>
</div>
<div class="row2" width="100%">
<div class="members col-md-6" id="ninomiya" height="225px">
<img src="images/ninomiya.jpg" class="images" height="225px">
<span class="text">Kazunari Ninomiya<br>Birth: 17-06-1983,<br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span>
</div>
<div class="members col-md-6" id="matsumoto" height="225px">
<img src="images/matsumoto.jpg" class="images" height="225px">
<span class="text">Jun Matsumoto<br>Birth:30-08-1983, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span>
</div>
</div>
Something like this should get you started...
Each horizontal row should be in a <div class="row">
Inside a row, all col should add up to 12. So, there's a 2+4+4+2 row, and there's also a 6+6 row, etc.
Don't forget class="img-responsive" for images... very useful.
.imgIB{display:inline-block !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="section2" class="container-fluid">
<h2>The Members</h2>
<h3 id="hoverovertext">(Hover-over each member to learn more)</h3>
<div class="row1" width="100%">
<div class="col-xs-2"></div>
<div class="col-xs-4 members" id="ohno">
<img src="http://placeimg.com/100/100/animals" class="img-responsive">
<span class="text">Satoshi Ohno(Leader)<br>Birth: 26-11-1980, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1994</span>
</div>
<div class="col-xs-4 members" id="sakurai">
<img src="http://placeimg.com/100/100/animals" class="img-responsive">
<span class="text">Sho Sakurai<br>Birth: 25-01-1982, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1995<br>Graduated Keio University</span>
</div>
<div class="col-xs-2"></div>
</div><!-- .row -->
<div class="row1" width="100%">
<div class="col-xs-4"></div>
<div class="col-xs-4 members" id="aiba">
<img src="http://placeimg.com/100/100/animals" class="img-responsive">
<span class="text">Masaki Aiba<br>Birth: 24-12-1982, <br>Chiba (Jpn)<br>Joined "Johnnys" in 1996</span>
</div>
<div class="col-xs-4"></div>
</div><!-- .row -->
<div class="row" width="100%">
<div class="col-xs-6 members text-center" id="ninomiya">
<div>
<img src="http://placeimg.com/100/100/animals" class="img-responsive imgIB">
</div>
<span class="text">Kazunari Ninomiya<br>Birth: 17-06-1983,<br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span>
</div>
<div class="col-xs-6 members text-center" id="matsumoto">
<div>
<img src="http://placeimg.com/100/100/animals" class="img-responsive imgIB">
</div>
<span class="text">Jun Matsumoto<br>Birth:30-08-1983, <br>Tokyo (Jpn)<br>Joined "Johnnys" in 1996</span>
</div>
</div><!-- .row -->
</div>
I have a container-fluid that contains 3 row
Row 1: 4 images
Row 2: 4 images
Row 3: 3 images
I am trying to center Row 3, I tried adding Row 3 inside another class called "container" and tried the "left, right" in css but did not work, may you please help?
.b3 {
padding-bottom: 20px;
}
.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-responsive {
padding-bottom: 10px;
}
#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
<section class="container-fluid client-section" id="clients">
<div class="row">
<div>
<b class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1 b2 b3">Clients</b>
</div>
</div>
<div class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1">
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
</div>
</section>
Is this your solution
.b3 {
padding-bottom: 20px;
}
.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-responsive {
padding-bottom: 10px;
}
.center .img-responsive{
margin:0 auto;
display:block;
}
#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
The last row have 9, need to be 12, replace 3 by 4.
<div class="row">
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
And change the css by this:
.img-responsive {
padding-bottom: 10px;
display:block;
margin-left: auto;
margin-right: auto
}
you can use bootstrap class text-center
or you can just add this css
.center{
text-align: center;
}
.b3 {
padding-bottom: 20px;
}
.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-responsive {
padding-bottom: 10px;
}
#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
.center{
text-align: center;
}
<section class="container-fluid client-section" id="clients">
<div class="row">
<div>
<b class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1 b2 b3">Clients</b>
</div>
</div>
<div class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1">
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
</div>
</section>
I am trying to get 4 columns in a row.
Code:
<div class="banner-static" style="margin-top: 30px; margin-bottom: 15px;">
<div class="row">
<div class="home-banner">
<div class="col2 col-xs-12 col-sm-4 col-md-4">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner1_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner1.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-4 col-md-4">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner2_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner2.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-4 col-md-4">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner3.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-4 col-md-4">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner3.jpg" alt="" />
</a>
</p>
</div>
</div>
</div>
</div>
But i only get 3 columns, the last image jumps into to next row. Can somebody point me into the right direction ?
Thanks
Just apply the col-sm-3, col-md-3 class on columns instead of col-sm-4, col-md-4.
<div class="banner-static" style="margin-top: 30px; margin-bottom: 15px;">
<div class="row">
<div class="home-banner">
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner1_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner1.jpg" alt="" /></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner2_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner2.jpg" alt="" /></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner3_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner3.jpg" alt="" /></p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner3_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner3.jpg" alt="" /></p>
</div>
</div>
</div>
</div>
Replace col-sm-4 and col-md-4 with col-sm-3 and col-md-3. Twitter Bootstrap is a 12 column grid system and hence 4+4+4+4= 16 will push the last column to next row.
<div class="banner-static" style="margin-top: 30px; margin-bottom: 15px;">
<div class="row">
<div class="home-banner">
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner1_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner1.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner2_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner2.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner3.jpg" alt="" />
</a>
</p>
</div>
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3">
<a href="#">
<img class="top" src="/img/cms/banner3_hover.jpg" alt="" />
<img class="bottom" src="/img/cms/banner3.jpg" alt="" />
</a>
</p>
</div>
</div>
</div>
</div>
Try this
<div class="col2 col-xs-12 col-sm-3 col-md-3">
<p class="img3"><img class="top" src="/img/cms/banner1_hover.jpg" alt="" /> <img class="bottom" src="/img/cms/banner1.jpg" alt="" /></p>
</div>
The Bootstrap grid is split up into 12 columns. Divide 12 by the number of columns you want, and you will get the number for that class.
For example, 12 divided by 4, is 3. So your classes should be col-sm-3 and col-md-3.
https://getbootstrap.com/examples/grid/