A grid system based on the flex display property.
Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.
<div class="row">
+Flexbox Grid Flexbox Grid
A grid system based on the flex display property.
Responsive
Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.
<div class="row">
<div class="col-xs-12
col-sm-8
col-md-6
col-lg-4">
<div class="box">Responsive</div>
</div>
-</div>
Fluid
Percent based widths allow fluid resizing of columns and rows.
.col-xs-6 {
+</div>
Hidden columns
col-xs-hidden<div class="row">
+ <div class="hidden-xs
+ col-sm-8
+ col-md-hidden
+ col-lg-4">
+ <div class="box">Hidden</div>
+ </div>
+</div>
Fluid
Percent based widths allow fluid resizing of columns and rows.
.col-xs-6 {
flex-basis: 50%;
}
Simple Syntax
All you need to remember is row, column, content.
<div class="row">
<div class="col-xs-12">
@@ -193,10 +200,10 @@
</div>
</div>
Flexbox Grid
-
-
-
-
-
-
-
-
-
-
-
-
- Flexbox Grid
-
-
- A grid system based on the flex display
- property.
-
-
-
-
-
-
-
-
- Responsive
-
- Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs,
- sm, md & lg viewport widths.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<div class="row">
+
+
+
+ Flexbox Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Flexbox Grid
+
+
+ A grid system based on the flex display property.
+
+
+
+
+
+
+
+
+
+ Responsive
+
+ Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <div class="row">
<div class="col-xs-12
col-sm-8
col-md-6
@@ -108,240 +106,262 @@ Responsive
<div class="box">Responsive</div>
</div>
</div>
-
-
-
-
-
- Fluid
-
- Percent based widths allow fluid resizing of columns and rows.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-.col-xs-6 {
+
+
+
+ Hidden columns
+
+
+ col-xs-hidden
+
+
+
+
+
+ <div class="row">
+ <div class="hidden-xs
+ col-sm-8
+ col-md-hidden
+ col-lg-4">
+ <div class="box">Hidden</div>
+ </div>
+</div>
+
+
+
+
+ Fluid
+
+ Percent based widths allow fluid resizing of columns and rows.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ .col-xs-6 {
flex-basis: 50%;
}
-
+
-
-
- Simple Syntax
+
+
+ Simple Syntax
- All you need to remember is row, column, content.
-<div class="row">
+ All you need to remember is row, column, content.
+ <div class="row">
<div class="col-xs-12">
<div class="box">12</div>
</div>
</div>
-
-
-
-
- Offsets
-
- Offset a column
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<div class="row">
+
+
+
+
+ Offsets
+
+ Offset a column
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <div class="row">
<div class="col-xs-offset-3 col-xs-9">
<div class="box">offset</div>
</div>
</div>
-
-
-
-
- Auto Width
-
- Add any number of auto sizing columns to a row. Let the grid figure it out.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<div class="row">
+
+
+
+
+ Auto Width
+
+ Add any number of auto sizing columns to a row. Let the grid figure it out.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <div class="row">
<div class="col-xs">
<div class="box">auto</div>
</div>
</div>
-
-
-
-
- Nested Grids
-
- Nest grids inside grids inside grids.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<div class="row">
+
+
+
+
+ Nested Grids
+
+ Nest grids inside grids inside grids.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <div class="row">
<div class="col-xs">
<div class="box">
<div class="row">
@@ -353,28 +373,27 @@ Nested Grids
</div>
</div>
-
-
-
-
- Alignment
-
- Add classes to align elements to the start or end of a row as well as the top,
- bottom, or center of a column
- .start-
-
-
-
-
-
-
-
-
-
-
-
-
-<div class="row start-xs">
+
+
+
+
+ Alignment
+
+ Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column
+ .start-
+
+
+
+
+
+
+
+
+
+
+
+
+ <div class="row start-xs">
<div class="col-xs-6">
<div class="box">
start
@@ -384,20 +403,20 @@ .start-
- .center-
-
-
-
-
-
-
-
-
-
-
-
-
-<div class="row center-xs">
+ .center-
+
+
+
+
+
+
+
+
+
+
+
+
+ <div class="row center-xs">
<div class="col-xs-6">
<div class="box">
start
@@ -406,20 +425,20 @@ .center-
</div>
- .end-
-
-
-
-
-
-
-
-
-
-
-
-
-<div class="row end-xs">
+ .end-
+
+
+
+
+
+
+
+
+
+
+
+
+ <div class="row end-xs">
<div class="col-xs-6">
<div class="box">
end
@@ -428,19 +447,19 @@ .end-
</div>
- Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.
-
-
-
-
-
-
-
-
-
-
- Example
-<div class="row center-xs end-sm start-lg">
+ Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.
+
+
+
+
+
+
+
+
+
+
+ Example
+ <div class="row center-xs end-sm start-lg">
<div class="col-xs-6">
<div class="box">
All together now
@@ -449,17 +468,17 @@ .end-
</div>
- .top-
-
-
-
-
-
-
-
-
-
-<div class="row top-xs">
+ .top-
+
+
+
+
+
+
+
+
+
+ <div class="row top-xs">
<div class="col-xs-6">
<div class="box">
top
@@ -468,17 +487,17 @@ .top-
</div>
- .middle-
-
-
-
-
-
-
-
-
-
-<div class="row middle-xs">
+ .middle-
+
+
+
+
+
+
+
+
+
+ <div class="row middle-xs">
<div class="col-xs-6">
<div class="box">
center
@@ -487,17 +506,17 @@ .middle-
</div>
- .bottom-
-
-
-
-
-
-
-
-
-
-<div class="row bottom-xs">
+ .bottom-
+
+
+
+
+
+
+
+
+
+ <div class="row bottom-xs">
<div class="col-xs-6">
<div class="box">
bottom
@@ -506,33 +525,33 @@ .bottom-
</div>
-
-
-
-
- Distribution
-
- Add classes to distribute the contents of a row or column.
- .around-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<div class="row around-xs">
+
+
+
+
+ Distribution
+
+ Add classes to distribute the contents of a row or column.
+ .around-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <div class="row around-xs">
<div class="col-xs-2">
<div class="box">
around
@@ -551,26 +570,26 @@ .around-
</div>
- .between-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<div class="row between-xs">
+ .between-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <div class="row between-xs">
<div class="col-xs-2">
<div class="box">
between
@@ -589,42 +608,42 @@ .between-
</div>
-
-
-
-
- Reordering
-
- Add classes to reorder columns.
- .first-
-
-
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
-
-
-
-<div class="row">
+
+
+
+
+ Reordering
+
+ Add classes to reorder columns.
+ .first-
+
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
+
+
+ <div class="row">
<div class="col-xs-2">
<div class="box">
1
@@ -643,35 +662,35 @@ .first-
</div>
- .last-
-
-
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
-
-
-
-<div class="row">
+ .last-
+
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
+
+
+ <div class="row">
<div class="col-xs-2 last-xs">
<div class="box">
1
@@ -690,41 +709,41 @@ .last-
</div>
-
-
-
-
- Reversing
-
- .reverse
-
-
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
- 4
-
-
- 5
-
-
- 6
-
-
-
-
-
-<div class="row reverse">
+
+
+
+
+ Reversing
+
+ .reverse
+
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
+
+
+ <div class="row reverse">
<div class="col-xs-2">
<div class="box">
1
@@ -743,32 +762,31 @@ .reverse
</div>
-
-
+ ⇪ back to top
+
+
+
+
+
+
+
+
-