Flexbox Grid
Grid system using flex properties
Flex Columns
The columns will divide the space available between them
<!-- The columns will divide the space available between them-->
<div class="row">
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Flex stack column
These column will not be flexible and they will be stacked under its resolution size
Full width under md
Full width under md
Full width under md
<!-- These column will not be flexible and they will be stacked under its resolution size-->
<div class="row">
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
</div>
Content width column
lorem ipsum
hello world
hi
hi there
<div class="row">
<div class="col-auto"></div>
<div class="col-auto"></div>
<div class="col-auto"></div>
<div class="col-auto"></div>
</div>
12 Columns based
col-md-4
col-md-4
col-md-4
col-md-8
col-md-4
col-md-7
col-md-5
<div class="row">
<div class="col-md-4 col-xs"></div>
<div class="col-md-4 col-xs"></div>
<div class="col-md-4 col-xs"></div>
</div>
<div class="row">
<div class="col-md-8 col-xs"></div>
<div class="col-md-4 col-xs"></div>
</div>
<div class="row">
<div class="col-md-7 col-xs"></div>
<div class="col-md-5 col-xs"></div>
</div>
Mobile and desktop resize
You can use size prefix to resize columns in each resolution size
col-lg-4 col-xs-6
col-lg-4 col-xs-6
col-lg-4 col-xs-6
col-lg-4 col-xs-6
col-lg-4 col-xs-6
col-lg-4 col-xs-6
<div class="row">
<!-- col-sm-6 and col-lg-4 are implicit-->
<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>
Mobile, tablet and desktop resize
If you use only a prefix the column will have the same width until the next bigger resolution prefix used
col-xs-12 col-md-3 col-sm-6
col-xs-12 col-md-3 col-sm-6
col-xs-12 col-md-3 col-sm-6
col-xs-12 col-md-3 col-sm-6
<div class="row">
<div class="col-xs-12 col-md-3 col-sm-6"></div>
<div class="col-xs-12 col-md-3 col-sm-6"></div>
<div class="col-xs-12 col-md-3 col-sm-6"></div>
<div class="col-xs-12 col-md-3 col-sm-6"></div>
</div>
col-md-9
col-sm-10
col-xs-12
col-md-3
col-sm-2
col-xs-12
<!-- col-lg is implict with col-md-->
<div class="row">
<div class="col-md-9 col-sm-10 col-xs-12"></div>
<div class="col-md-3 col-sm-2 col-xs-12"></div>
</div>