I am having a hard time getting 5 img-responsives classes in a row with bootstrap. I am new to bootstrap so I may be way off here but this is what I have right now.
HTML:
<div class="container" id="pics" >
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/usscreenshot.png">
<h3> Make a real time post with your friends!</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/mainscreenshot-01.png">
<h3> Discover new groups of people nearby!</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/conversationsscreenshot-01.png">
<h3>Chat with interesting groups!</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/eventscreenshot-01.png">
<h3>Find cool places to go!</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<img class="img-responsive" src="img/eventscreenshot-01.png">
<h3>Find cool places to go!</h3>
</div>
</div>
</div>
</div>
</section>
I can get 4 img's in a nice row with proper spacing and it seems I have plenty of margin on either side for one more. I would like all 5 img's to be on one row and to all be responsive?
As far as mobile goes, I would only need 1 column scroll of all 5 images, I can get that to work just fine with what I have.
Thanks for any help.
You are using col-md-3 which will separate row in 4 equal column and the last column will move to next line instead set offset of 1 column and make each column of 2 point like col-md-2
<div class="container" id="pics" >
<div class="row">
<div class="col-md-2 col-md-offset-1 text-center">
<div class="service-box">
<img class="img-responsive" src="img/usscreenshot.png">
<h3> Make a real time post with your friends!</h3>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-box">
<img class="img-responsive" src="img/mainscreenshot-01.png">
<h3> Discover new groups of people nearby!</h3>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-box">
<img class="img-responsive" src="img/conversationsscreenshot-01.png">
<h3>Chat with interesting groups!</h3>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-box">
<img class="img-responsive" src="img/eventscreenshot-01.png">
<h3>Find cool places to go!</h3>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-box">
<img class="img-responsive" src="img/eventscreenshot-01.png">
<h3>Find cool places to go!</h3>
</div>
</div>
</div>
</div>
Related
I am new to bootstrap and I'm stuck on the following problem:
In mobile, I want "big-guy" to occupy the whole width and the "small-guys" to be evenly positioned underneath it. So far so good.
The problem is: in medium displays, I want the "big-guy" to occupy 75% of the width and the small-guys should be placed on its left, stacked on top of each other.
So far, this is the code I have, I would like to keep this structure if possible.
<div class="row">
<div id="big-guy" class="col-sm-12"></div>
<div id="small-guy-1" class="col-sm-4"></div>
<div id="small-guy-2" class="col-sm-4"></div>
<div id="small-guy-3" class="col-sm-4"></div>
</div>
Image for reference:
You would use nesting and the appropriate responsive grid sizes...
<div class="row">
<div id="big-guy" class="col-sm-9 py-sm-0 py-3">
</div>
<div class="col-sm-3">
<div class="row">
<div id="small-guy-1" class="col-4 col-sm-12">
</div>
<div id="small-guy-2" class="col-4 col-sm-12 py-sm-4 py-0">
</div>
<div id="small-guy-3" class="col-4 col-sm-12">
</div>
</div>
</div>
</div>
Responsive demo
Here it is.
<div class="container">
<div class="row">
<div class="col-md-9 pt-5">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2019/12/26/11/04/new-years-day-4720210_960_720.jpg" title="" alt="">
</div>
<div class="col-md-3">
<div class="row pt-5">
<div class="col-4 col-md-12 col-sm-4">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2013/02/21/19/14/firecracker-84715_960_720.jpg" title="" alt="">
</div>
<div class="col-4 col-md-12 col-sm-4">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2013/02/21/19/14/firecracker-84715_960_720.jpg" title="" alt="">
</div>
<div class="col-4 col-md-12 col-sm-4">
<img class="img-fluid pb-3" src="https://cdn.pixabay.com/photo/2013/02/21/19/14/firecracker-84715_960_720.jpg" title="" alt="">
</div>
</div>
</div>
</div>
</div>
good day, I have a goal of aligning all images and test in my 12 grid bootstrap column. i divided it in 6, 4, and 2 but the icons in the 2 column does not match the length with the other columns. i have images of the current one and the layout that i intended to create.
<div class="container-full col-md-12">
<div class="row">
<div class="col-md-6">
<img src="img/pic1.jpg" class="display_img">
</div>
<div class="col-md-4">
<h1 class="text-center">A Wealth of Deals for Wellness</h1>
</div>
<div class="col-md-2">
<img src="img/link_beauty.png">
<img src="img/link_health.png">
<img src="img/link_wellness.png">
<img src="img/link_partners.png">
</div>
</div>
</div>
You can add class="img-responsive" class to <img> tag for creating the images responsive. Please see the below updated code:
<div class="container-full col-md-12">
<div class="row">
<div class="col-md-6">
<img src="img/pic1.jpg" class="display_img img-responsive">
</div>
<div class="col-md-4">
<h1 class="text-center">A Wealth of Deals for Wellness</h1>
</div>
<div class="col-md-2">
<img src="img/link_beauty.png" class="img-responsive">
<img src="img/link_health.png" class="img-responsive">
<img src="img/link_wellness.png" class="img-responsive">
<img src="img/link_partners.png" class="img-responsive">
</div>
</div>
</div>
When I drop in the third image, it is showing up shorter than the rest. When I replace the image name with say the Serendipity image it doesn't appear shorter. All images are 1200X800.
<!--Start design section-->
<a id="design">
<div class="container-fluid designContainer text-center">
<img class="img-fluid sectionIMG" src="images/design.png" alt="design">
<div class="container-fluid text-center">
<div class="row justify-content-md-center">
<div class="col-lg-4 col-md-6 col-sm-12 project">
<div class="hovereffect">
<img class="img-fluid projectIcon" src="images/logo_serendipity.png" alt="serendipity">
<div class="overlay">
<h2>Serendipity Coffee & Tea</h2>
<p>A small, family owned, cafe in the heart of Osage County.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 project">
<div class="hovereffect">
<img class="img-fluid projectIcon" src="images/logo_audrey.jpg" alt="Audrey Collins">
<div class="overlay">
<h2>Audrey Collins</h2>
<p>A rising pop artist located in Seattle, WA</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 project">
<div class="hovereffect">
<img class="img-fluid projectIcon" src="images/p2p.jpg" alt="P2P">
<div class="overlay">
<h2>Point to Point Transportation</h2>
<p>A rising pop artist located in Seattle, WA</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End design Section-->
JsFiddle Example
Notice the far right image appears shorter even though everything is the extact same except the image link.
I have this div:
<section id="categorias">
<div class="container content-section">
<div class="row">
<div class="col-md-3">
<img class="img img-responsive" src="img/catmusica.png"></img>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/catpaisajes.png"></img>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/catgrafiti.png"></img>
</div>
<div class="col-md-3" >
<img class="img-responsive" src="img/catpoly.png"></img>
</div>
</div>
</div>
</section>
That looks like this:
And I want to maintain the 4 columns or at least 2 above and 2 below when I shrink the window but this happens:
I have only bootstraps css.
Thanks
You should also add grid system classes for smaller screens - col-sm-3 and col-xs-3. See following code:
<section id="categorias">
<div class="container content-section">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img img-responsive" src="img/catmusica.png"></img>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="img/catpaisajes.png"></img>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="img/catgrafiti.png"></img>
</div>
<div class="col-md-3 col-sm-3 col-xs-3" >
<img class="img-responsive" src="img/catpoly.png"></img>
</div>
</div>
</div>
</section>
working example
If you want to have only 2 columns on smaller screens then you need to apply this classes on div wrapping images:
<div class="col-md-3 col-sm-6 col-xs-6">
<img class="img img-responsive" src="img/catmusica.png"></img>
</div>
Hello i m new to bootstrap and i want to know how to display two images on one line and keep the responsive function.Can you give me an example ?
<div class="col-xs-12 col-md-8">
<img src="images/l.jpg" class="img-responsive" alt="Logo">
</div>
Sure, for BS2:
<div class="row-fluid">
<div class="span6"><img src="yourimage"/></div>
<div class="span6"><img src="yourimage"/></div>
</div>
For BS3:
<div class="row">
<div class="col-xs-6 col-md-6"><img src="yourimage"/></div>
<div class="col-xs-6 col-md-6"><img src="yourimage"/></div>
</div>
EDIT: 01/03/2017
For BS4 (w/ FLEXBOX):
<div class="row">
<div class="col"><img src="yourimage"/></div>
<div class="col"><img src="yourimage"/></div>
</div>
Another solution is to float the images to the left:
<img class="pull-left" src="yourimage"/>
<img class="pull-left" src="yourimage"/>
It should be something like that
<div class="col-xs-12 col-md-8">
<div class="row">
<div class="col-xs-4 col-md-4">
<img src="images/l.jpg" class="img-responsive" alt="Logo">
</div>
<div class="col-xs-4 col-md-4">
<img src="images/2.jpg" class="img-responsive" alt="Logo">
</div>
<div class="col-xs-4 col-md-4">
<img src="images/2.jpg" class="img-responsive" alt="Logo">
</div>
</div>
</div>