Skip to content
Scroll to the top of the page

Article

Columns

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

layoutsports unionStrath Union

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 of Strath students

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 of Strath students
<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 of Strath students" src="/pageassets/people-4.jpg" />
</div>
</div>

 

 

Related articles

Changing page images

Page images appear at the top of each page and in the explore section.

Editing page descriptions

The page descriptions appear in the explore section as well as at the top of each page.

Changing page titles

Page titles show in the hero at the top of each page, the page tab, and in the 'explore this area' sections.

Videos

Embed videos on your website while making sure they look great on mobile and desktop.

 

Website design by Elliot Parker.