1280px wide or more100%/12 * X where X an integer value between 1 and 12. For example, if you have 7 col-sm elements in one row, each of the elements will have a width of 1/7th the width of the row.<div class="col-sm">
<div class="container">
</div>
@@ -226,14 +230,14 @@
</div>
Do: A column can contain a container or a row inside it. The container can also be skipped if inside a column, so you only need to add a row.
<div class="col-sm">
<div class="col-sm">
</div>
</div>
Don't: Avoid using columns inside columns without a row wrapping them. Either make the outer column a row in itself or wrap the inside columns in a row.
<div class="col-sm row">
<div class="col-sm-6">
</div>
@@ -243,13 +247,13 @@
Do: A column can also be a row at the same time, if you want to include sub-columns inside it. You can make the same element both a column in its own row and a row for its containing columns. The same can be applied for the container. Containers can, however, be omitted, when already inside a grid.
<div class="row">
<!-- content without columns -->
</div>
Don't: Avoid using rows with content inside that is not in columns. Prefer to use a single .col-sm to wrap the content inside these, otherwise there might be unexpected behavior.
<div class="row">
<div class="col-sm">
<div>
@@ -263,10 +267,10 @@
<div class="col-sm-12">
</div>
</div>
- Do: Mix fluid columns with fixed, if you like. Fluid columns will adapt to the size of the container left for them. You can also use columns with a total width of more than 12, meaning with a total width of over 100%. The remaining content will flow below the rest, allowing you to specify multiple blocks of content inside the same row if you need to.
Do: Mix fluid columns with fixed, if you like. Fluid columns will adapt to the size of the container left for them. You can also use columns with a total size of more than 12, meaning with a total width of over 100%. The remaining content will flow below the rest, allowing you to specify multiple blocks of content inside the same row if you need to.
<div class="container">
<div class="row">
<div class="col-sm">
@@ -307,9 +311,74 @@
You can specify different layouts for your pages and web apps, using the grid system's columns. To do this add classes to your columns for different screen sizes, using either the fluid column syntax (.col-SCR_SZ) or the fixed width column syntax (.col-SCR_SZ-COL_WD) or even both.
<div class="container"> + <div class="row"> + <div class="col-sm"> + </div> + </div> + <div class="row"> + <div class="col-sm-12 col-md-3 col-lg-2"> + </div> + <div class="col-sm-12 col-md-5 col-lg-7"> + </div> + <div class="col-sm-12 col-md-4 col-lg-3"> + </div> + </div> + <div class="row"> + <div class="col-sm"> + </div> + </div> +</div>
<div class="row"> + <div class="col-sm-12 col-md-6"> + </div> + <div class="col-sm-12 col-md-6"> + </div> +</div>+
Do: You can radically change the layout of your content for different displays. Laying out your content vertically in col-sm-12s for small devices and then compacting it to col-md-6s for medium displays is pretty common. If your columns exceed a total size of 12 on some displays, they will wrap accordingly, so do not worry.
<div class="row"> + <div class="col-sm-12 col-md-6"> + </div> +</div> +<div class="row"> + <div class="col-sm-12 col-md-6"> + </div> +</div>+
Don't: If you want to place two columns side by side on some displays, but not on others (e.g. placing them vertically on smaller displays, then nex to each other on medium or large displays), place them in one row, not multiple, otherwise you will not achieve the desired effect.
+<div class="row"> + <div class="col-sm col-lg-3"> + </div> + <div class="col-sm-6 col-md-8"> + </div> +</div>+
Do: Specify only the screen-specific column sizes that you need. You can omit the medium-sized screens' size from a column if its layout on smaller screens is fluid or should be the same as in medium-sized displays. Or, if your large screen layout is the same as your medium-sized screen layout, you can omit the class for the large screen.
+<div class="row"> + <div class="col-md"> + </div> + <div class="col-lg"> + </div> +</div>+
Don't: Never omit the class needed for the smallest screen size you have (col-sm or col-sm-X), otherwise the column's layout on smaller displays might behave unexpectedly. You can, however, omit layout for the other two screen sizes if you want.
DO: Col-sm-12 col-md, col-sm-12 col-md, DONT: row > col-sm-12 col-md / row > col-sm-12 col-md, DONT: Spec col-md but no col-sm!!
-