Columns

Columns

The LSX theme makes things easy when it comes to adding columns to content on your WordPress website. Using Bootstrap classes, you can quickly create responsive columns that look great on desktop and mobile devices.

Adding columns to content using Bootstrap classes

Before adding columns to content, you first need to create a row in which to place a columns. Afterwards, you add the columns.

1. Create a row

Add the class “row” to a div tag:

1<div class="row"></div>

2. Create columns

You can use the following classes to create columns:

  • .col-xs-
  • .col-sm-
  • .col-md-
  • .col-lg-

Each class will have a different responsive breakpoint. For instance, “.col-sm-” breaks on small devices like tablets but not on laptops.

Learn about the classes and their breakpoints here: http://getbootstrap.com/css/#grid

The Grid System

Columns work with 12 grid classes. These classes allow you to create up to 12 columns within a “row”container.

For example, if you wanted to create two columns, you would create two div tags with the class “.col-sm-6”, and place them inside inside the “row” container. See code below:

1<div class="row">
2
3 
4<div class="col-sm-6">
5
6half a column
7
8</div>
9
10
11 
12<div class="col-sm-6">
13
14half a column
15
16</div>
17
18
19</div>

The result:

Half-Column

You can, of course, interchange the column sizes. For example, if you wanted one column to be a third of the page and another to be two thirds, you would use:

1<div class="row">
2
3 
4<div class="col-sm-8">
5
6two-thirds column
7
8</div>
9
10 
11<div class="col-sm-4">
12
13one-third column
14
15</div>
16
17
18</div>

The result:

Two-Thirds-Column

Whatever fractions you use, the total of the column classes inside the row must always equal 12.

Another example would be if you wanted three columns and two of them must be the size of a quarter of the page, and the other must be the size of half the page. For this, you’d add the following code:

1<div class="row">
2
3 
4<div class="col-sm-6">
5
6half-sized column
7
8</div>
9
10 
11<div class="col-sm-3">
12
13quarter-sized column
14
15</div>
16
17 
18<div class="col-sm-3">
19
20quarter-sized column
21
22</div>
23
24
25</div>

The result:

Three-Columns

Learn more about the 12-column grid system here: http://getbootstrap.com/css/#grid

Tags: