10th November 2015 in Web Design

Bootstrap Grid: Shortcodes for WordPress

By Louise Towler

In today’s age of mobile devices, responsive design is essential if you want your website to display correctly across devices of all sizes. Using tables to align items in columns is a method that lots of people use, but tables are often not the best or correct option, especially for responsive websites. A better option is to use a grid system, which you can find out more about in one of our previous blog posts: Using a Grid System for Responsive Web Development. In this post, we’ll have an in-depth look at the Bootstrap framework mentioned there, as well as its plugin for WordPress: Bootstrap 3 Shortcodes for WordPress.

The Grid System

Bootsraps’s grid system enables you to create up to twelve columns across the page. For example, you can create a row of twelve columns that span one column in width:

[row]
[column sm=”1″]

1

[/column]
[column sm=”1″]

1

[/column]
[column sm=”1″]

1

[/column]
[column sm=”1″]

1

[/column]
[column sm=”1″]

1

[/column]
[column sm=”1″]

1

[/column]
[column sm=”1″]

1

[/column]
[column sm=”1″]

1

[/column]
[column sm=”1″]

1

[/column]
[column sm=”1″]

1

[/column]
[column sm=”1″]

1

[/column]
[column sm=”1″]

1

[/column]
[/row]

You can also have four columns that each span three columns:

[row]
[column sm=”3″]

Span 3

[/column]
[column sm=”3″]

Span 3

[/column]
[column sm=”3″]

Span 3

[/column]
[column sm=”3″]

Span 3

[/column]
[/row]

Or even one single column that spans all twelve columns:

[row]
[column sm=”12″]

Span 12

[/column]
[/row]

You can also have columns of different widths within one row. For example, the columns below vary in size:

[row]
[column sm=”1″]

1

[/column]
[column sm=”2″]

2

[/column]
[column sm=”3″]

3

[/column]
[column sm=”4″]

4

[/column]
[column sm=”2″]

2

[/column]
[/row]

Now, this is an interactive blog: if you make the window smaller, you’ll witness the responsive nature of the bootstrap grid as the columns break onto new lines – note that, if you are on a mobile device, they may already look like this. As this happens, the columns will stack on top of each other, with one column per row now spanning the full width (unless set with the “xs” class, but we’ll get to that later!). This prevents the text becoming unreadable on smaller windows and devices as the columns are not squashed together.

WordPress Shortcodes

To create columns like these on WordPress once you have the Bootstrap 3 plugin installed, you would add shortcodes into the text. For example, if you wanted to create the 4 by 3 column example above, you would type in the following:

[[row]
    [column sm="3"]
        Span 3
    [/column]
    [column sm="3"]
        Span 3
    [/column]
    [column sm="3"]
        Span 3
    [/column]
    [column sm="3"]
        Span 3
    [/column]
[/row]]

Note that the text centring and borders have been removed from the code above.

To change the size of the column, simply change the number within the square brackets. Any number between one and twelve is permissible, but you should make sure that your columns do not total more than twelve.

A great feature in Bootstrap is the grid classes that are available to you; these designate at what width the columns will break on to new rows. The examples above were set with the “sm” class, which means small. There are four classes in total, and each class has its own break width and usage:
[responsive_table]

[/responsive_table]

You only need to set one class per as they scale up, but you can set more than one class per column. For example, the columns below appear at varying sizes on different screen widths:

[row]
[column lg=”3″ md=”4″ sm=”2″ xs=”3″]

lg = 3
md = 4
sm = 2
xs = 3

[/column]
[column lg=”3″ md=”2″ sm=”3″ xs=”4″]

lg = 3
md = 2
sm = 3
xs = 4

[/column]
[column lg=”3″ md=”2″ sm=”4″ xs=”3″]

lg = 3
md = 2
sm = 4
xs = 3

[/column]
[column lg=”3″ md=”4″ sm=”3″ xs=”2″]

lg = 3
md = 4
sm = 3
xs = 2

[/column]
[/row]

This allows you to create columns that can respond to various screen sizes and look great across all devices. An example of code for columns with multiple classes is as follows:

[[row]
    [column lg="3" md="4" sm="2" xs="3"]
        lg = 3
        md = 4
        sm = 2
        xs = 3
    [/column]
    [column lg="3" md="2" sm="3" xs="4"]
        lg = 3
        md = 2
        sm = 3
        xs = 4
    [/column]
[/row]]

Using the Grid System Effectively

Whilst columns can be used effectively to link related items, they may become separated when the columns break if coded incorrectly. For example, how would you expect the following code to break?

[[row]
    [column md="6"]
        Saturday 21st November
        Sunday 22nd November
        Monday 23rd November
    [/column]
    [column md="6"]
        6pm – 8pm
        9am – 1pm
        2pm – 5pm
    [/column]
[/row]]

Would it break like the column on the left, or the one on the right?

[row]
[column xs=”6″ lg=”6″]

Saturday 21^st November
6pm – 8pm

Sunday 22^nd November
9am – 1pm

Monday 23^rd November
2pm – 5pm

[/column]
[column xs=”6″ lg=”6″]

Saturday 21^st November
Sunday 22^nd November
Monday 23^rd November

6pm – 8pm
9am – 1pm
2pm – 5pm

[/column]
[/row]

Ideally, you would want these items to break as they do in the left-hand column so that the times are kept with their respective date, but the actual result would be the column on the right. You might think that this isn’t an issue as you can easily match each date to a time, but would you be able to do that if the list contained, say, fifty items? You would need to continuously scroll up and down the page on a mobile device to try and match a date with the time, which would be more or less impossible as each item is not numbered.

Instead of numbering every column – which isn’t practical at all – you can use rows to break up each event date and time. All the examples so far have only used one row, but you can use several rows to connect the contents of the columns within that row. For example, if you look at the example below and make the window smaller, the columns will break in the style of the left-hand column from above.

[row]
[column md=”6″]

Saturday 21^st November

[/column]
[column md=”6″]

6pm – 8pm

[/column]
[/row]
[row]
[column md=”6″]

Sunday 22^nd November

[/column]
[column md=”6″]

9am – 1pm

[/column]
[/row]
[row]
[column md=”6″]

Monday 23^rd November

[/column]
[column md=”6″]

2pm – 5pm

[/column]
[/row]

The code for this contains a row for each set of data and looks as follows:

[[row]
    [column md="6"]
        Saturday 21st November
    [/column]
    [column md="6"]
        6pm – 8pm
    [/column]
[/row]]
[[row]
    [column md="6"]
        Sunday 22nd November
    [/column]
    [column md="6"]
        9am – 1pm
    [/column]
[/row]]
[[row]
    [column md="6"]
        Monday 23rd November
    [/column]
    [column md="6"]
        2pm – 5pm
    [/column]
[/row]]

Therefore, related information should be within its own row if it’s to be kept together when the columns break.

And that concludes this look at Bootstrap’s grid system. Using the information here, you’ll now be able to create responsive columns that look fantastic and work great on any device! But note that Bootstrap 4 is due out late 2015/early 2016, so we will have to review this post once that version is available.