I asked a responsive question in my previous post.
How to set responsive divs in my case?
I fixed my html to be valid html codes but it seems like I don't have the padding on the left of red column and right of the gray column anymore in tablet view. I think I do have valid bootstrap class but I am not sure what happen. Can someone help me out about this?
My jsFiddle
http://jsfiddle.net/0qarh5yt/6/
<div class="container">
<div id="wrapper">
<div class="row">
<div class="col-md-1"></div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
</div>
</div>
</div>
You have negative margins on row:
.row {
margin-right: -15px;
margin-left: -15px;
}
if you delete these or set them to 0 it will solve your issue
(everything else is ok);
fiddle
Related
I have two columns in one row like a
<div class="col-lg-10 col-md-12">
<div class="form-row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="form-row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
And it's look fine on full screen but at rwd and small width rows are broken...
Screens:
http://s4.postimg.org/m0zht42wr/Zrzut_ekranu_2015_08_11_o_13_02_57.png
http://s2.postimg.org/vsujeo1uv/Zrzut_ekranu_2015_08_11_o_13_03_13.png
Might solve it, might not:
Always add the xs size. if it is supposed to be col-12 add it.
<div class="col-xs-12 col-md-12 col-lg-10">
<div class="form-row">
<div class="col-xs-12 col-md-6">
</div>
<div class="col-xs-12 col-md-6">
</div>
</div>
<div class="form-row">
<div class="col-xs-12 col-md-6">
</div>
<div class="col-xs-12 col-md-6">
</div>
</div>
</div>
Help me, how to set each column same height? I have this structure:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
</div>
</div>
In this case, the content displayed is as follows:
But when I try to resize the browser window, the content is shifted wrong:
And so should:
How to fix it?
One way would be to add a clearfix that's only visible on the smaller viewports..
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
<div class="col-md-3 col-sm-6">
<!--content-->
</div>
</div>
</div>
http://bootply.com/ZDDbPlCraT
create a custom css class in your .css file
.fixed-height {
height: 200px;
}
Then add this to your HTML as follows:
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
<div class="col-md-3 col-sm-6 fixed-height">
<!--content-->
</div>
</div>
</div>
I want to use col-md-2 for the large pc view and col-xs-12 for tablet view.
My problem is that when I turn to larger width view, I see there are gaps between each div. This doesn't happen in the tablet view.
Html code:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="wrapper">
<div class="row">
<div class="col-md-1"></div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12">
test
</div>
<div class="col-xs-9 col-md-12 test2">
test 2
</div>
</div>
</div>
</div>
</div>
Jsfiddle link
Can anyone help me about it? Thanks!
You're trying to nest the grid. If you nest the grid you need an additional <div class="row"> between the two column classes to offset the padding.
For example the <div> with the class col-xs-12 col-md-2 has a direct child <div> with class col-xs-3 col-md-12 box1.
Change this from
<div class="col-xs-12 col-md-2">
<div class="col-xs-3 col-md-12 box1">
into
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
I've updated your example to add these <div class="row">'s
.box1 {
background-color: grey;
}
.box2 {
background-color: red;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="wrapper">
<div class="row">
<div class="col-md-1"></div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12">
test
</div>
<div class="col-xs-9 col-md-12 test2">
test 2
</div>
</div>
</div>
</div>
</div>
</div>
The gaps are defined in Bootstrap grid settings. Classes with xs-* are all 100% width blocks, so there are no gaps.
If you want to have grid system without gaps on all screen sizes, you need to customize your Bootstrap build - http://getbootstrap.com/customize/
I used to have a working layout of a header, side navigation column, main large content column , and a footer. Now the navigation column is sitting on top of the content column even though the numbers should add up. I just need my navigation column to line up next to my content. You can see my WIP HERE. What am I doing wrong?
Here is basically what my code for my layout is:
<div class="container">
<div class="row">
<div class="page-header">
<p>HEADER</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="page-footer">
<p>FOOTER</p>
</div>
</div>
</div>
Your help is greatly appreciated. Thank you! :)
The column divs only line up beside each other for the divs actually are "siblings" to each other, apart from adding up numberwise.
Try putting the navigation and content columns in the same container -> row tag, like so:
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
From the look of your code, it looks like you want your columns next to each other. This should work
<div class="container">
<div class="row">
<div class="page-header">
<p>HEADER</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="page-footer">
<p>FOOTER</p>
</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