In the Theme Blvd Framework, we utilize Bootstrap’s grid system to display columns in many different scenarios — like general sidebar layouts, footer columns, columns element of the layout builder, etc.
Bootstrap uses a 12-column grid system. If you’re not familiar with this terminology, it basically just means that your columns need to be fractions of 12. And in addition to this, we also add a 10-column grid system, available for you to use.
In the table below, you can see all available CSS classes, taking into account both our 10-column grid system and default Bootstrap 12-column grid system.
| Fraction | Percentage | Never Collapses | Collapse @767px | Collapse @991px | Collapse @1199px |
|---|---|---|---|---|---|
| 1/12 | 8.33% | .col-xs-1 | .col-sm-1 | .col-md-1 | .col-lg-1 |
| 1/10 | 10% | .col-xs-010 | .col-sm-010 | .col-md-010 | .col-lg-010 |
| 1/6 | 16.66% | .col-xs-2 | .col-sm-2 | .col-md-2 | .col-lg-2 |
| 1/5 | 20% | .col-xs-020 | .col-sm-020 | .col-md-020 | .col-lg-020 |
| 1/4 | 25% | .col-xs-3 | .col-sm-3 | .col-md-3 | .col-lg-3 |
| 3/10 | 30% | .col-xs-030 | .col-sm-030 | .col-md-030 | .col-lg-030 |
| 1/3 | 33.33% | .col-xs-4 | .col-sm-4 | .col-md-4 | .col-lg-4 |
| 2/5 | 40% | .col-xs-040 | .col-sm-040 | .col-md-040 | .col-lg-040 |
| 5/12 | 41.66% | .col-xs-5 | .col-sm-5 | .col-md-5 | .col-lg-5 |
| 1/2 | 50% | .col-xs-6 | .col-sm-6 | .col-md-6 | .col-lg-6 |
| 7/12 | 58.33% | .col-xs-7 | .col-sm-7 | .col-md-7 | .col-lg-7 |
| 3/5 | 60% | .col-xs-060 | .col-sm-060 | .col-md-060 | .col-lg-060 |
| 2/3 | 66.66% | .col-xs-8 | .col-sm-8 | .col-md-8 | .col-lg-8 |
| 7/10 | 70% | .col-xs-070 | .col-sm-070 | .col-md-070 | .col-lg-070 |
| 3/4 | 75% | .col-xs-9 | .col-sm-9 | .col-md-9 | .col-lg-9 |
| 4/5 | 80% | .col-xs-080 | .col-sm-080 | .col-md-080 | .col-lg-080 |
| 5/6 | 83.33% | .col-xs-10 | .col-sm-10 | .col-md-10 | .col-lg-10 |
| 9/10 | 90% | .col-xs-090 | .col-sm-090 | .col-md-090 | .col-lg-090 |
| 11/12 | 91.66% | .col-xs-11 | .col-sm-11 | .col-md-11 | .col-lg-11 |
| 1 | 100% | .col-xs-12 | .col-sm-12 | .col-md-12 | .col-lg-12 |
Usage
It may be a bit overwhelming to see all the CSS classes in the table above. So, let’s start with setting up a basic HTML example. The following will display three equal-width columns, which collapse at the mobile viewport (767px)
<div class="row">
<div class="col-sm-4">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-4">Column 3</div>
</div>
What if we want those three columns to collapse at a larger viewport, like at tablets? Then we use md instead of sm.
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
Taking everything in, the most important thing to understand is that you want to use the table above to make sure all of your CSS class fractions add up to 100%. In the basic examples we just covered, we had three columns, each 1/3, all adding up to 100%.
1/3 + 1/3 + 1/3 = 100%
So next, let’s set up three columns, where the middle column is wider than the other two. We’ll make the middle column 1/2, and the other two 1/4.
1/4 + 1/2 + 1/4 = 100%
<div class="row">
<div class="col-md-3">Column 1</div>
<div class="col-md-6">Column 2</div>
<div class="col-md-3">Column 3</div>
</div>
And because the framework adds a 10-column grid system, you can also utilize fractions, divisible by 10. — So for example, let’s say 1/2 just isn’t big enough for our middle column, and we want it just a bit bigger. Let’s increase it to 3/5, making the other two columns 1/5.
1/5 + 3/5 + 1/5 = 100%
<div class="row">
<div class="col-sm-020">Column 1</div>
<div class="col-sm-060">Column 2</div>
<div class="col-sm-020">Column 3</div>
</div>