02-19-2016, 06:01 PM
Bootstrap Grid - Docs
It's far less forgiving than XHTML, if you play by the rules it will truly sing to you.
I pulled out some main points from the link above:
Where I refer to row, this is a div with class of row <div class="row">.
A column, is a div inside a row that may have one or more special Bootstrap classes to control it's width.
1. Rows must be placed within a .container (fixed-width) or .container-fluid (full-width).
The outermost wrapper of your site. You cannot nest container or container-fluid.
2. No Cols in cols. Use rows to create horizontal groups of columns. Only columns may be immediate children of rows.
A row must contain columns. If you need to split a column, use another row inside the column and then add further columns.
3. The number 12. The number of columns in every row must add up to 12. (! I know!)
This is where those col-*-* classes come into play.
You can specify multiple column classes that dictate how that column will behave across differing device sizes.
A common example is 3 columns of content - mostly centered, and a pleasing width on wide devices.
For mobile, it's desirable to have the content stack vertically.
Bootstrap provides this with the row and col rules.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 col-lg-6">
Left becomes top
</div>
<div class="col-xs-6 col-md-4 col-lg-3">
Small 1 becomes bottom left
</div>
<div class="col-xs-6 col-md-4 col-lg-3">
Small 2 becomes bottom right
</div>
</div>
</div>
eta, indenting courtesy of the forum software
It's far less forgiving than XHTML, if you play by the rules it will truly sing to you.
I pulled out some main points from the link above:
Where I refer to row, this is a div with class of row <div class="row">.
A column, is a div inside a row that may have one or more special Bootstrap classes to control it's width.
1. Rows must be placed within a .container (fixed-width) or .container-fluid (full-width).
The outermost wrapper of your site. You cannot nest container or container-fluid.
2. No Cols in cols. Use rows to create horizontal groups of columns. Only columns may be immediate children of rows.
A row must contain columns. If you need to split a column, use another row inside the column and then add further columns.
3. The number 12. The number of columns in every row must add up to 12. (! I know!)
This is where those col-*-* classes come into play.
You can specify multiple column classes that dictate how that column will behave across differing device sizes.
A common example is 3 columns of content - mostly centered, and a pleasing width on wide devices.
For mobile, it's desirable to have the content stack vertically.
Bootstrap provides this with the row and col rules.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4 col-lg-6">
Left becomes top
</div>
<div class="col-xs-6 col-md-4 col-lg-3">
Small 1 becomes bottom left
</div>
<div class="col-xs-6 col-md-4 col-lg-3">
Small 2 becomes bottom right
</div>
</div>
</div>
eta, indenting courtesy of the forum software