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>