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
<divclass="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.
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
<divclass="row">
2
3
4
<divclass="col-sm-6">
5
6
half a column
7
8
</div>
9
10
11
12
<divclass="col-sm-6">
13
14
half a column
15
16
</div>
17
18
19
</div>
The result:
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
<divclass="row">
2
3
4
<divclass="col-sm-8">
5
6
two-thirds column
7
8
</div>
9
10
11
<divclass="col-sm-4">
12
13
one-third column
14
15
</div>
16
17
18
</div>
The result:
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:
