Bootstrap 3 image responsive height not working - html

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>

Related

Div with text wont stay centered

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>

Bootstrap CSS Grid Customize

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>

Twitter Bootstrap - unusual arrangement of the columns

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

Issue with lack of spacing between nested rows in Bootstrap3

New learner here. I am having an issue with the lack of spacing between my 2 rows nested inside my .col-md-10 div. Right now my code looks like this:
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>Portfolio</h3>
</div> <!--.page-header-->
<div class="row center-block">
<div class="col-md-4">
<img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
</div><!--.col-md-4-->
<div class="col-md-4">
<img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
</div><!--.col-md-4-->
<div class="col-md-4">
<img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
</div><!--.col-md-4-->
</div> <!--.row-->
<div class="row center-block">
<div class="col-md-4">
<img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
</div><!--.col-md-4-->
<div class="col-md-4">
<img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
</div><!--.col-md-4-->
<div class="col-md-4">
<img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
</div><!--.col-md-4-->
</div> <!--.row-->
</div> <!--.panel-body-->
</div><!--.panel panel-default-->
</div><!--.col-md-10-->
</row><!--.row-->
Here is what it looks like on the screen.
I originally separated the images into two .row center-block divs (instead of all .col-md-4 divs being in one .row div) based on the "offsetting columns" example on the Bootstrap website, however it did not change what is rendered on the screen.
If this is helpful, here is all of my code for my project. Thanks in advance!

In the Twitter Bootstrap, there is normally no space between the rows. So, you need to add a margin by yourself. You can create a class and add it to your second row. For instance:
.row-space{
margin-top:10px;
}
Then,
<div class="row center-block row-space">
//The content goes here
</div>

Building off of LVarayut's answer, I ended up adding a margin-top to all .col-md-4 divs in order to adjust the spacing between the rows. In addition, I combined the two .row center-block divs into one div and added a .col-xs-6 class, which will now render 2 images per row on mobile and tablet sizes. Here is my new code:
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>Portfolio</h3>
</div> <!--.page-header-->
<div class="row center-block">
<div class="col-md-4 col-xs-6">
<img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
</div><!--.col-md-4-->
<div class="col-md-4 col-xs-6">
<img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
</div><!--.col-md-4-->
<div class="col-md-4 col-xs-6">
<img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
</div><!--.col-md-4-->
<div class="col-md-4 col-xs-6">
<img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
</div><!--.col-md-4-->
<div class="col-md-4 col-xs-6">
<img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
</div><!--.col-md-4-->
<div class="col-md-4 col-xs-6">
<img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/>
</div><!--.col-md-4-->
</div> <!--.row-->
</div> <!--.panel-body-->
</div><!--.panel panel-default-->
</div><!--.col-md-10-->
Here is where I added a margin-top to achieve the spacing:
.col-md-4, .col-xs-6 {
margin-top: 20px;
}

How to display two images on one line Bootstrap 3

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>