Skip to content

News Article

Columns

Create engaging layouts using columns to spread out photography, text and buttons.

layout

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.

A photograph

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.

A photograph
<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>