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>
Related
I had inserted a row (col-md-12) div inside col-md-2 div. I want row div to take the full width of the page. But it takes only the width of the parent col-md-2. How can I overcome this issue in the bootstrap way?
<div class="options-main row">
<div class="col-md-2 col-sm-3 border-box">
<img src="#" class="img-responsive">
<div class="options-main-sub row">
<div class="col-md-2 col-sm-3 border-box">
</div>
<div class="col-md-2 col-sm-3 border-box">
</div>
<div class="col-md-2 col-sm-3 border-box">
</div>
<div class="col-md-2 col-sm-3 border-box">
</div>
<div class="col-md-2 col-sm-3 border-box">
</div>
<div class="col-md-2 col-sm-3 border-box">
</div>
</div>
</div>
<div class="col-md-2 col-sm-3 border-box">
</div>
<div class="col-md-2 col-sm-3 border-box">
</div>
<div class="col-md-2 col-sm-3 border-box">
</div>
<div class="col-md-2 col-sm-3 border-box">
</div>
<div class="col-md-2 col-sm-3 border-box">
</div>
</div>
This is how it looks in actual. Each column in the first row will have 6 corresponding columns in second row
Use separate row elements for each row that you want to create in your page. This is a basic concept in bootstrap and you should not be going ahead without understanding this concept.
Your problem can be solved as follows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-2 col-xs-push-2">
Content
</div>
</div>
<div class="row">
<div class="col-xs-2">
Content
</div>
<div class="col-xs-2">
Content
</div>
<div class="col-xs-2">
Content
</div>
<div class="col-xs-2">
Content
</div>
<div class="col-xs-2">
Content
</div>
<div class="col-xs-2">
Content
</div>
</div>
</div>
Please note, in above to code snippet, I have replaced col-md-x with col-xs-x to see same preview on small screens.
Also note the col-xs-push-x class. It is used to set offset. So, in this demo I assume that corresponding to an entry in second column of first row, there are 6 columns in second row.
You need to use some class or id relation to indicate that, a particular second row belongs an entry in first row.
Alternatively, you can enclose second row inside a fixed block
.hover {
position: fixed;
width: 100%;
left: 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-2 col-xs-push-2">
Content
<div class="hover">
<div class="row">
<div class="col-xs-2">
Content
</div>
<div class="col-xs-2">
Content
</div>
<div class="col-xs-2">
Content
</div>
<div class="col-xs-2">
Content
</div>
<div class="col-xs-2">
Content
</div>
<div class="col-xs-2">
Content
</div>
</div>
</div>
</div>
</div>
</div>
However, please note that this not a bootstrap 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 am doing a website using bootstrap 3.0 which I want the HTML and CSS to be seen neatly on a desktop, tablet and mobile.
A problem that I am having is that when you view the site on a mobile display the column are stacked (in which I am not criticizing as this stops scrolling as much as possible). However, I would like a little gap between the columns (even 1-2px).
The code so far
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8">
<div class="Columns">
..content
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-4">
<div class="Columns">
..content
</div>
</div>
</div>
An image to show what this is doing and to display the stack columns
How could I achieve a little gap between the columns?
Thanks
Add a custom class .column-margin to set the margin between the rows/columns.
#media (max-width: 991px) {
.column-margin {
margin: 2px 0;
}
}
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8">
<div class="Columns column-margin">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-4">
<div class="Columns">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>
Codeply
Give a margin for the col-xs-12 so all blocks will have bottom margin in mobile devices.
#media (max-width: 767px) {
.col-xs-12 {
margin-bottom: 10px;
}
}
To get even spacing and column size I would do the following: (Note: change col-md-* to col-sm-* or col-xs-* as you like )
<div class="container">
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
</div>
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