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>
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 simple image gallery. Above the images I name the place where the pictures were taken, but the second and every another row has issues - div with the name is being pushed to the right instead of staying centered. Here is how it looks: http://prntscr.com/fg10u4
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);
.locationName {
text-align: center;
padding: 0px 0px 20px 20px;
}
<div class="row" id="locations">
<div class="locationName">
City
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
</div>
Obviously the code is doubled inside the "row" div.
Bring this below code out of row and that should go the way you want.
<div class="locationName">
City
</div>
You are facing this problem because you can see in the image(link) you
provided that the middle image has moved slightly down and hence
it affects the title of the next row everytime.
i saw your issue. actually there is a conflict with the boxes height. to quickly fix this you can increase your thumbs height equal. or you can see the example code below.
<div class="row" id="locations">
<div class="col-lg-12 col-sm-12 locationName">City</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail"> <img src="2.jpg"> </div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail"> <img src="1.jpg"> </div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail"> <img src="2.jpg"> </div>
</div>
<div class="col-lg-12 col-sm-12 locationName"> City </div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail"> <img src="2.jpg"> </div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail"> <img src="1.jpg"> </div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail"> <img src="2.jpg"> </div>
</div>
</div>
Add a full 12 column grid to the locationName class so that it takes up the whole row and force a break between the other columns. As you currently have it, it is trying to be placed inline, which is after the longest image.
<div class="row" id="locations">
<div class="col-xs-12 locationName">
City
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
</div>
Looks like there is a conflict with the bootstrap you are using. Try moving the title (City) before the div with class row.
<div class="locationName">
City
</div>
<div class="row" id="locations">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
</div>
try this:
<div class="container" id="locations">
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
</div>
<div class="locationName">
City
</div>
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="1.jpg">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="2.jpg">
</div>
</div>
</div>
</div>
You can use center tag like this
<div class="row" id="locations">
<center>
....
</center>
</div>
I wanted to create an image grid with one full image on the left and 4 thumbnail images on right of the big image. Something like what I've done here:
https://codepen.io/ashwindkini/pen/qabRok
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/450x450" alt="" />
</div>
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
</div>
How do I prevent the second set of images (thumbnails) from increasing the size of row?
Are you able to make the larger image actually a larger image so that it scales responsively in comparison with the smaller "thumbnails"?
It would help to remove padding from the columns so that the width of the image (forced by column padding) doesn't limit the height of the image.
Everything can go in a single row..
<div class="container">
<div class="row">
<div class="img col-sm-6 col-md-6">
<img src="//placehold.it/600/666" class="center-block img-responsive" alt="big image">
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450/EEE" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450" class="img-responsive" >
</div>
<div class="img col-xs-6 col-sm-6 col-md-3">
<img src="//placehold.it/450/444" class="img-responsive" >
</div>
</div>
</div>
http://www.codeply.com/go/y9nZTlXSWT
The "row" element should not be a direct child of another row element. You should put it as a child of another col-md-6.
Here's the example:
https://codepen.io/anon/pen/dpGvOJ
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/450x450" alt="" />
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
<div class="col-md-3">
<img src="https://placehold.it/450x450" alt="" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
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>
I have a problem and I can't find a good solution right now. What I want to achieve is this (on screen size >= medium):
In black boxes there will be images. The white color represents the user screen view. I would like for those two horizontal boxes to fully fit to the screen edges.
<link href="http://cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=1" alt="" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=2" alt="" />
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-4">
<!-- make it span to the right edge of the screen on resolution >= medium -->
<img class="img-responsive" src="http://placehold.it/1920x300&text=3" alt="" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<!-- make it span to the left edge of the screen on resolution >= medium -->
<img class="img-responsive" src="http://placehold.it/1920x300&text=4" alt="" />
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=5" alt="" />
</div>
<div class="hidden-xs col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=6" alt="" />
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=7" alt="" />
</div>
<div class="hidden-xs hidden-sm col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=8" alt="" />
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300&text=9" alt="" />
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">some more content that is in container class, the total width of those three images above should be equal to this container so it fits nicely</div>
</div>
</div>
I give you the basic grid with elements that I want to see based on user screen size.
Any help with this would be great.
BTW: this need to be in the container because there will be content above and below those images and it needs to be somehow aligned to be consistent.
I think this should work for you
<div class="container">
<div class="row">
<div class="col-sm-2 col-sm-offset-3"></div>
<div class="col-sm-2"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
</div>
<div class="row">
<div class="col-sm-2 col-sm-offset-3"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
</div>
</div>
You can use the col-md-offset-x class to achieve the gabs. For example a row with a gab at the beginning:
<div class="col-md-2 col-md-offset-2">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-2">
<img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
Note that you created a grid with 5 'places'. This is not possible in standard bootstrap, as bootstrap's grid is based upon 12 'places' (12 modulo 5 = 2).
AFAIK, the only way to acheive this is with nesting and column offsets. Also, you have to use container-fluid if you want to fill the entire screen width. The use the grid columns to limit the width of the 3rd row. You're basically turning the 12 column grid into a 10 column grid.
http://codeply.com/go/k8LNUgjaa0
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11 col-md-offset-2">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-11 col-md-offset-2">
<div class="row">
<div class="col-md-3 col-md-push-3">
</div>
<div class="col-md-3 col-md-push-3">
</div>
<div class="col-md-6 col-md-pull-9">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-11 col-md-offset-2">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
</div>
</div>
Hi you can use customized column like below
<style>
.col-md-offset-sp { margin-left:20% }
#media (min-width:992px) { .col-md-sp { position:relative;min-height:1px;padding-right:15px;padding-left:15px;float:left; width: 20%; }}
#media (min-width:992px) { .col-md-2sp { position:relative;min-height:1px;padding-right:15px;padding-left:15px;float:left; width: 40%; }}
</style>
<div class="container">
<div class="row">
<div class="col-md-sp col-md-offset-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-2sp"><img src="http://placehold.it/500x150" /></div>
<div class="col-md-2sp"><img src="http://placehold.it/500x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp col-md-offset-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
<div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
</div>
</div>
Here col-md-sp and col-md-2sp take care of 5 column layout (width 20% & 40%). While col-md-offset-sp take care of margin for 5 column layout (margin-left 20%).
Note : other rules are just copied from bootstrap.css file