We use Bootstrap grid system.
Our layout is divided into 12 columns (100% width), i.e. Sum of columns must be 12 (not less or more)
Table with respective class and their percentages:
.col- md -11 -> width: 91.66666667%;
.col- md -10 -> width: 83.33333333%;
.col- md -9 -> width: 75%;
.col- md -8 -> width: 66.66666667%;
.col- md -7 -> width: 58.33333333%;
.col- md -6 -> width: 50%;
.col- md -5 -> width: 41.66666667%;
.col- md -4 -> width: 33.33333333%;
.col- md -3 -> width: 25%;
.col- md -2 -> width: 16.66666667%;
.col- md -1 -> width: 8.33333333%;
Example:
If we want to add a table with four equal columns:
100% width / 4 = 25% - use col-md-3
<div class=”col-md-3”>…</div> <div class=”col-md-3”>…</div> <div class=”col-md-3”>…</div> <div class=”col-md-3”>…</div>
If we want the first column is greater than the other can use:
<div class=”col-md-4”>…</div> <div class=”col-md-2”>…</div> <div class=”col-md-2”>…</div> <div class=”col-md-2”>…</div>
Again, the total number of columns is 12!
Example: Stacked-to-horizontal
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
Example: Stacked-to-horizontal
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
Example: Stacked-to-horizontal
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
