If you've spent any time working with bootstrap templates, or the new Bootstrap grid system in BS3, you've probably seen markup with the col-x grid classes, for example a two column layout:

view plain print about
1<div class="container">
2<div class="row">
3<div id="primary" class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
4</div>
5<div id="sidebar" class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
6</div>
7</div>
8</div>

This will result in a two column layout on large screens, with the proportions shifting for "sm" or small screens, and stacked columns on "xs" or extra-small screens.

While amazingly simple to use once you get the hang of it, maintaining this code is messy and can be both a visual and mathematical challenge when working in a multi-column layout.

LESS Mixins to the Rescue

There is actually a very straightforward way to apply the bootstrap styles to any element in your page, using LESS. Compiling less into css is a subject all its own, one I am learning a lot about and increasingly amazed by.

Like so many other things with dynamic LESS styles, the solution in this case is both simple and impressive.

(Note: this solution requires you are using LESS to import bootstrap.less, rather than just including the standard bootstrap.css file. Your theme's less file should import bootstrap.less above the place where you insert this solution.)

Let's assume I have markup like this, notice there are no bootstrap classes involved here, this could be any CSS multi-column layout:

view plain print about
1<div id="content">
2 <div id="col-1">Main column here</div>
3 <div id="col-2">Sidebar stuff here</div>
4</div>

Rather than adding all the bootstrap classes inline, we can use the power of LESS to add them for us:

view plain print about
1#content{
2 .make-row();
3}
4#col-1{
5.make-xs-column(12);
6.make-sm-column(8);
7.make-md-column(9);
8.make-lg-column(9);
9}
10#col-2{
11.make-xs-column(12);
12.make-sm-column(4);
13.make-md-column(3);
14.make-lg-column(3);
15}

Using the 'make-x-column' mixins, which can accept arguments just like a scripted method, you can apply the classes for "col-lg-3" by adding the dynamic class ".make-lg-column(3)".

This will have the same effect as applying the classes in the first code sample, "col-lg-9 col-md-9 col-sm-8 col-xs-12" , without actually putting those classes into your markup!

Similarly, the ".make-row()" function has the same effect as adding class="row" to any element, creating a Boostrap row to contain the columns.

Applying it Dynamically

To expand on this a little further, I'm working with dynamic pages, where the body has a class applied like onecol, threecol, etc., which represents the layout of the page. So, in my real-world solution I am actually looking at the class of the body, then setting the rules on the column elements for each potential set of columns:

view plain print about
1//apply bootstrap classes to standard elements
2#content{
3 .make-row();
4}
5//threecol
6body.threecol #col-1{
7.make-xs-column(12);
8.make-sm-column(3);
9.make-md-column(3);
10.make-lg-column(3);
11}
12body.threecol #col-2{
13.make-xs-column(12);
14.make-sm-column(6);
15.make-md-column(6);
16.make-lg-column(6);
17}
18body.threecol #col-3{
19.make-xs-column(12);
20.make-sm-column(3);
21.make-md-column(3);
22.make-lg-column(3);
23}
24//twocolleft
25body.twocolsl #col-1{
26.make-xs-column(12);
27.make-sm-column(4);
28.make-md-column(3);
29.make-lg-column(3);
30}
31body.twocolsl #col-2{
32.make-xs-column(12);
33.make-sm-column(8);
34.make-md-column(9);
35.make-lg-column(9);
36}
37//twocolright
38body.twocolsr #col-3{
39.make-xs-column(12);
40.make-sm-column(4);
41.make-md-column(3);
42.make-lg-column(3);
43}
44body.twocolsr #col-2{
45.make-xs-column(12);
46.make-sm-column(8);
47.make-md-column(9);
48.make-lg-column(9);
49}
50//onecol
51body.onecol #col-2{
52.make-xs-column(12);
53.make-sm-column(12);
54.make-md-column(12);
55.make-lg-column(12);
56}

For the simplest example of what this does, look at the last block. If the "#col-2" element exists inside a body with the class of "onecol", it takes up the full grid (12 spaces). But just above that, if the same element exists inside a body with the class "twocolsr", different dimensions are applied to allow the right sidebar to show on various screen sizes.

My ColdFusion logic does the work of showing or hiding the 1st or 3rd columns, so I don't need CSS rules for those in the twocol or onecol layouts. But in theory I could simply apply the hidden class ".hidden" to those columns to prevent them from showing at all in certain layouts.

Getting this set up was a snap, and I find it a lot easier to edit the numbers in the code you see above, than to dig through a folder of template files.

Now my Mura site has a single dynamic cfml template (dynamic.cfm, in my mura templates folder) where i can set a class on the body, and the column sizes will cascade via the LESS rules above. Changes are easily made, including additional classes or mixins applied to various content objects, directly in the code with no need to open or even find the template file for a given layout.