I creating simple post list with thumbnails.
I have created this code:
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
but on FullHD (1920px) I getting values for col-sm-* - why?
http://prntscr.com/an1097
This is because there is no over-riding column offset above for viewports above col-sm. Meaning that your page will display as the 6 central columns with the three column offset - even on larger screens.
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
you will need to add the following (col-md-offset-0) to each of the parent divs to prevent the offset in -md and -lg and to allow the two divs to display side by side:
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-0">
I just tested this and it now works and displays the columns side by side - look at the code snippet in action (in full screen mode - the columns are adjacent and in the small window they stack vertically. Note that I added coloured backgrounds to demonstrate the point.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:red">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:blue">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</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>
I have the following code:
<div class="row second-row">
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
</div>
When we have a big screen, al the images show side by side on the same row, and when I go to a smaller screen they stack one on top of the other.
How can I make a break between each image? I need it to have a white space like each image was on a different row.
I tried adding <br> that were only visible with xs or sm but it didn't work. Is this possible in a simple way, or should I add paddings on a media query?
Try this and see if it works.
<div class="row second-row">
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-xs-1 visible-xs">
<br/>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-xs-1 visible-xs">
<br/>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
<div class="col-xs-1 visible-xs">
<br/>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<img class="img-responsive" src="http://placehold.it/200x150">
</div>
</div>
#media only screen and (max-width : 768px) {
.col-class-here {
margin-top: 15px;
}
}
Why would there be a problem with doing this? Pretty much what you suggested yourself. This IS a simple way.
I have two rows of three columns that I have set up with Twitter Bootstrap like so:
<div class="row">
<div class="col-md-4">
Some Stuff
</div>
<div class="col-md-4">
Some more stuff
</div>
<div class="col-md-4">
Even more stuff
</div>
</div>
<div class="row">
<div class="col-md-4">
Some Stuff
</div>
<div class="col-md-4">
Some more stuff
</div>
<div class="col-md-4">
Even more stuff
</div>
</div>
This works fine for a certain pixel width (two rows of three nice columns), but when I reduce the screen size, it has 2 in one row, and then 1 on another row (for 1 row). And then when an iPhone screen size they are each in their own row, but they are off center.
How do I make it so that these rows are responsive so that, when the screen size is reduced, 2 columns are displayed as 50% of the container width? And then when the screen is reduced to a phone device width, each column takes up 100% of the container width.
See Example:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
</div>
Please try this,
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
</div>
use phone size css instead of desktop so it will remain same on all screen sizes.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-4">
Some Stuff
</div>
<div class="col-xs-4">
Some more stuff
</div>
<div class="col-xs-4">
Even more stuff
</div>
</div>
<div class="row">
<div class="col-xs-4">
Some Stuff
</div>
<div class="col-xs-4">
Some more stuff
</div>
<div class="col-xs-4">
Even more stuff
</div>
</div>
I'm not sure if I'm doing anything wrong but I'm getting a weird bug in a bootstrap grid when I resize my browser. It happens in a matter of a pixel and stops when I keep resizing. One of the images in the grid gets out of place and goes to the bottom. I'll attach a picture of the fail and another one of the normal.
Does anyone know what this bug is and how to fix it?
this is my code:
<section class="container-fluid">
<div class="row">
<div class="col-xs-12"> <img id="imgClickAndChange" src="img.jpg" onclick="changeImage(1)"/> </div>
</div>
<div class="row no-pad">
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img1.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img2.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img1.jpg"/>
</div>
</div>
<div class="row no-pad">
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img2.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img1.jpg"/>
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<img class="grid" src="img.jpg2"/>
</div>
</div>
</section>
Only css I used:
Btw it's a customized bootstrap (but the only thing I customized was the min width for a large screen from 1200px to 1900px and removed the grid glutter)
.grid { width: 100%;}
Thank you.
With Bootstrap, try applying the class img-responsive to your images to ensure they never exceed 100% width of their parent.
<img class="img-responsive" src="img1.jpg"/>
Documentation: http://getbootstrap.com/css/#images
If all the images are the same size, there is no issue:
https://jsbin.com/muzug/1/
https://jsbin.com/muzug/1/edit?html,css,output
Also, not necessary to have the col-xs-12, it will always be 100% under the last min-width class used.
Added a rounding error correction.
CSS:
.row.no-pad img {width:100.1%;}
.row.no-pad [class*="col-"] {padding:0;margin-bottom:-1px}
HTML
<section class="container-fluid">
<div class="row no-pad">
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
<div class="col-md-6 col-lg-4">
<img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
</div>
</div>
</div>
I have a footer on my website with six content blocks.
Depending on the breakpoints, I want to have them in 1x6, 2x3 or 3x2 format.
Without the push and pull classes, the blocks raster is working well on all breakpoints.
But you can imaging that I want to reorder some blocks if it flips from 3x2 to 2x3 format.
<!-- footer -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
</div>
<div class="col-sm-6 col-md-4">
</div>
<div class="col-sm-6 col-sm-push-6 col-md-4">
</div>
<div class="clearfix hidden-sm"></div>
<div class="col-sm-6 col-sm-pull-6 col-md-4">
</div>
<div class="col-sm-6 col-md-4">
</div>
<div class="col-sm-6 col-md-4">
</div>
</div>
</div>
</div>
In SM mode the reordering works fine.
But in LG mode it is still executing the col-sm-push-6 command because it push the 3th div out of the screen.
Is col-sm-push-6 not SM only?
You have to use col-md-push-0 / col-md-pull-0 to "reset" the push/pull for the other grid sizes..
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="well"> </div>
</div>
<div class="col-sm-6 col-md-4">
<div class="well"> </div>
</div>
<div class="col-sm-6 col-sm-push-6 col-md-4 col-md-push-0">
<div class="well"> </div>
</div>
<div class="clearfix hidden-sm"></div>
<div class="col-sm-6 col-sm-pull-6 col-md-4 col-md-pull-0">
<div class="well"> </div>
</div>
<div class="col-sm-6 col-md-4">
<div class="well"> </div>
</div>
<div class="col-sm-6 col-md-4">
<div class="well"> </div>
</div>
</div>
</div>
http://www.bootply.com/126837