Create engaging layouts using columns to spread out photography, text and buttons.
What do they look like?
This is the first column
Set to a 40% width, this column is home to a little bit of text.
How do I use them?
First you need to open up a container to put your individual columns in, using the columns class on a section, div or similar tag, like below:
<div class="columns">
Then you add your individual columns inside this. Whatever columns you put there must add up to 100%:
<section class="columns">
<div class="col-40">Content in a 40% width column</div>
<div class="col-60">Content in a 60% width column</div>
</section>
In the above example, we have col-40 and col-60.
<section class="columns">
<div class="col-20">Content in a 20% width column</div>
<div class="col-30">Content in a 30% width column</div>
<div class="col-50">Content in a 50% width column</div>
</section>
In this example, we have col-20 and col-30 and col-50.
Column width options
| Column width |
Class |
Code |
| 10% |
col-10 |
<div class="col-10">Content</div> |
| 20% |
col-20 |
<div class="col-20">Content</div> |
| 25% |
col-25 |
<div class="col-25">Content</div> |
| 30% |
col-30 |
<div class="col-30">Content</div> |
| 33.333% |
col-33 |
<div class="col-33">Content</div> |
| 40% |
col-40 |
<div class="col-40">Content</div> |
| 50% |
col-50 |
<div class="col-50">Content</div> |
| 60% |
col-60 |
<div class="col-60">Content</div> |
| 66.666% |
col-66 |
<div class="col-66">Content</div> |
| 70% |
col-70 |
<div class="col-70">Content</div> |
| 75% |
col-75 |
<div class="col-75">Content</div> |
| 80% |
col-80 |
<div class="col-80">Content</div> |
| 90% |
col-90 |
<div class="col-90">Content</div> |
Center your content
By using the align-center class, on a desktop the content in each coluns will be centered.
<div class="columns align-center">
<div class="col-40">
<h3>This is the second column</h3>
<p>This example is the same, except on a desktop the text is centered alongside the image to the right.</p>
</div>
<div class="col-60">
<img alt="A photograph" src="https://images.unsplash.com/photo-1669112870891-b18954631021?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8NXx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60" />
</div>
</div>