I'm currently experiencing irregular column wrapping behavior with Bootstrap. Some columns that wrap in my row are floated to the top of the container as opposed to below the previous element.
According to Bootstrap docs:
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
For example, I have:
<div class="container-fluid">
<div class="row first">
<div class="col-sm-6 col-md-3">
Col 1
</div>
<div class="col-sm-6 col-md-3">
Col 2
</div>
<div class="col-sm-6 col-md-3">
Col 3
</div>
<div class="col-sm-6 col-md-3">
Col 4
</div>
<div class="col-sm-6 col-md-4">
Col 5
</div>
<div class="col-sm-6 col-md-4">
Col 6
</div>
<div class="col-sm-12 col-md-4">
Col 7
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Panel
</div>
</div>
</div>
And the last column is behaving what I thought would be incorrect according to the docs. When you resize the viewport in the following example here, you can see that the 7th column has irregular behavior for small viewports. The column seems to fill the width/height of the parent element.
Is there an out-of-the-box way to fix this with bootstrap? Feel like I'm overlooking markup but I'm going cross-eyed at the moment...
I think your problem has to do with the fact the col-*-12 bootstrap classes don't float.
You can either add a float: left to your 7th column with col-sm-12 or you can add a clearfix before the col only visible at the breakpoint where it becomes 12 (sm).
like this:
<div class="col-sm-6 col-md-4">
Col 6
</div>
<div class="clearfix visible-sm"></div>
<div class="col-sm-12 col-md-4">
Col 7
</div>
you can see this fiddle
but doing this might be cleaner:
<div class="col-xs-12 col-md-4 pull-left">
Col 7
</div>
here is a demo of that solution.
You can run into a lot of issues when overloading rows, so its usually recommended to avoid it as much as you can and wrap things in .rows.
Related
I have an issue with col that aren't in one row. I have all of them in one container, row and 3 columns col-md-5, col-md-2 and col-md-5. All paddings and margins are set from CSS bootstrap.
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<div class="col-md-5 col-xs-12">
<div>
<div class="row-7 clearfix">
<p class="text">Výtečně<br>chutnám</p>
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
<div class="button-holder">Koupit</div>
</div>
</div>
<div class="col-md-2 col-xs-12 mobile-hide">
<div class="line"></div>
</div>
<div class="col-md-5 col-xs-12">
<p class="text-3">TEXT</p>
</div>
</div>
</div>
</div>
</div>
Dev page here: http://dev.ekolok.cz/
Thank you for advice and help.
I don't know what exactly your layout should look like but here is how bootstrap column layout should look:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
The problem in your code is that columns aren't a direct child of row etc.
Try to refactor the code and see if you understand what is going on...
Bootstrap columns must add up to 12 per row. If you would like multiple elements in a row, your 'col-whatevers' must add up to 12.
For example if you want your title and your button on the same row your code would need to look like this:
<div class="container">
<div class="row">
<div class="col-6">
<p class="text">Výtečně<br>chutnám</p>
</div>
<div class="col-6">
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
</div>
</div>
You would then need to add another 'row' element and fill that up with columns that add up to 12. Not sure if this is what you're asking but it's what I could make out from your question.
Also, empty 'divs' are redundant, it doesn't mean anything. You can remove all your tags that don't carry a class, id etc.
I would like the fields of my form to be placed differently on desktop and on tablet. For now, everything is fine on desktop. I have two similar cases. In the first one, I have something like this (the input fields are in the div's) :
<div class="row">
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
<div class="col-md-3 col-sm-6"></div>
</div>
It doesn't look bad on tablets, but instead of having only one field in the 3rd and 6th rows, I would like to have two. Should I use just one "row" instead of 2, and use empty "col-md-3" 's on desktop in order to have a single "row" going across multiple lines?
In the end I have a similar case :
<div class="row">
<div class="col-md-3 col-sm-6"></div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6"></div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6"></div>
</div>
I would like the two first fields to be on the same line.
Thanks
Yes, put them all in a single .row element. This is known as column wrapping.
Demo: http://www.codeply.com/go/7mUSsbO8od
From the Bootstrap docs:
"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"
There are also examples in the docs that demonstrate column wrapping. Just remember you may need to use responsive resets, if the columns vary in height.
You mean like this?
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="col-md-6 col-sm-6"></div>
<div class="col-md-6 col-sm-6"></div>
<div class="col-md-12 col-sm-6"></div>
</div>
</div>
How to make bootstrap separate add a row responsively. Maybe it is better draw it :D.
So here is what i have:
And here is what i want to end up with:
My html i like this but i know it doesnt work since it separates the first and the 2nd row into 2 rows (1st row 2 columns and 2nd row 1 column with the size of 6). So how to make this work,since i just started learning bootstrap today :)
My html
<div class="row">
<div class="col-md-4 col-xs6"></div>
<div class="col-md-4 col-xs6"></div>
<div class="col-md-4 col-xs6"></div>
</div>
<div class="row">
<div class="col-md-4 col-xs6"></div>
<div class="col-md-4 col-xs6"></div>
<div class="col-md-4 col-xs6"></div>
</div>
Would making all the columns child of a single .row work for you?
<div class="row">
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
<div class="col-md-4 col-xs-6"></div>
</div>
I don't think it would be easy/practical to make new rows like you want.
If you want the rows only for styling purposes you are better off using css and determine different styles when the layout changes
having trouble with laying out a fluid column layout in bootstrap 3.
the structure of the HTML elements looks like this:
div.container-fluid
div.row.upperrow
div.row.contentrow
div.col-lg-3
div.col-lg-1
div.col-lg-5
div.col-lg-3
even the first 3 divs, which only add up to 9/12 of the 12-column layout, are much wider than the page. the div.col-lg-5 easily takes up 70% of the row (not 5/12). the div.col-lg-3 is pushed under the first 3 divs as they are too wide.
what could be the problem here?
As stated at http://getbootstrap.com/css/:
Content should be placed within columns, and only columns may be immediate children of rows.
Your layout has a row as child from another row. Put another col-12 in between or remove one row.
Look at this fiddle. Here is how it works.
<div class="container-fluid">
<div class="row">
<p class="text-center">Here is a row</p>
</div><br/>
<div class="row">
<div class="col-3 col-sm-3 col-lg-3 col">Col 3</div>
<div class="col-2 col-sm-1 col-lg-2 col">Col 2</div>
<div class="col-4 col-sm-5 col-lg-4 col">Col 4</div>
<div class="col-3 col-sm-3 col-lg-3 col">Col 3</div>
</div>
</diV>
I am using bootstrap to write heading in one line than paragraph information starting in next line.
<div class="container col-sm-6">
<h4>Daily Information</h4>
</div>
<div class="col-sm-6"></div>
<div class="col-sm-6 cl6bg">
<p>xyzzzzzz</p>
</div>
Basically my goal is that Daily Information shows as heading than paragraph starts in next line. Since there are 12 col so it displays everything in same line.
I tried to put empty div with col-sm-6 it didn't work.
Please let me know how I can fix it so i can have them both in separate line.
try using rows :
<div class="container">
<div class='row'>
<div class='col-sm-6'>
<h4>Daily Information</h4>
</div>
</div>
<div class='row'>
<div class="col-sm-6 cl6bg">
<p>xyzzzzzz</p>
</div>
</div>
</div>
Maybe another ugly option could be using col-md-offset-6 to force 12 cols...
Add
<div class="clearfix"></div>
instead of that empty div.