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'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.
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
Bootstrap comes with a 12 columns grid system that must be placed within rows.
My question is, does the column number / row must be 12 (or less), or can I have a layout like the following
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
My understanding was that columns number within a row mustn't exceed 12, so based on my previous snippet, I would have made something like this
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
Is there anything I missed ?
Bootstrap allows you to "stack columns", the following is taken from their docs:
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Also from their docs:
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
Here, the col-xs values add up to 24, with a clearfix adding the required break
Patrick answer is correct but wanted to go into more detail since I was confused after reading documentation.
Depending on what you're going for having more than 12 columns without doing specific divs for multiple rows can make sense.
12 columns is as much as you can fit on 1 row.
More than 12 columns will cause multiple rows.
By default when you go down to the XS size it acts like col-xs-12. This is where you see it stacking the columns. You can change this behavior if you add a col-xs-n
More detailed jsfiddle Example
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-2">
Navigation
</div>
<div class="col-sm-6 col-md-5">
Editor
</div>
<div class="col-sm-6 col-md-5">
Display
</div>
</div>
</div>
In this example when viewing at medium size you see first column take up 2 columns and then the other two divs split the remaining columns. When you shrink it down to small the first div will then be a whole new row and the remaining divs will split 50/50. Then when you shrink down further to xs it will still do default behavior and stack columns evenly.
It makes sense to use this approach when you want all columns on one row in one resolution but want multiple rows in a different resolution. If you always want two rows then it would make more sense to make separate divs for each row.
Yes and no...
See example fiddle
You can have a layout like the one you specify, however it wont necessarily work per Bootstraps intended functionality, and as such its usually a good idea to follow their recommended row structure.
Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases.
Instead of
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
You should do, e.g:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
Within a row, the sum of the numbers following the hyphen in each column definition should add up to 12.
However.... if you decide to use their (Bootstrap's ) less fies, then you can set the #grid-columns to any value, not just 12.
http://getbootstrap.com/customize/#grid-system
If you are using Bootstrap 4, you create a custom 10 columns grid easily, using their SASS mixins for the grid.
$grid-columns: 10; // This is where you define the number of columns you need/want
#if $enable-grid-classes {
.row-odd-col {
#include make-row();
> {
#if $enable-grid-classes {
#include make-grid-columns();
}
}
}
}
You can then use them like this-
<div class="row-odd-col">
<div class="col-md-5 col-lg-2">1</div>
<div class="col-md-5 col-lg-2">2</div>
<div class="col-md-5 col-lg-2">3</div>
<div class="col-md-5 col-lg-2">4</div>
<div class="col-md-5 col-lg-2">5</div>
</div>
For more details, check here - https://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins
For making a responsive design of a website, first learn bootstrap or css grid layouts. It is also a good approach for making a responsive design. With bootstrap firstly learn grid system and learn the. Max an min widths for different devices and then set no. Of columns for each device and also set
#media (min-widtth: px) and (max-width: px) {}
And set individuals property for each device like phones, tablets, laptop and desktops for perfect fit.
Yes the sum of all columns in a row must be 12 or less. The answer above is correct, using:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
will give you the same effect as your example above. 12 columns is pretty standard across most CSS grid systems.
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.