Using Bootstrap Css and Less with WordPress

I am working on a new theme for WordPress that will use all the power of Bootstrap and Less.

Using less will allow you to easily modify the core styles of the framework with a simple line, no need to search and replace in all the css code. In this visual guide you can see all the variables that you can easily change with Less, as well as the default value:

In order to generate the files, I am using lessc compiler, it is the easier way I have found to generating the css from the less files, after looking at some options such as lessphp that I have not been able to make work properly – due to my lack of proficiency, not doubt about that!-.

Good luck if you are in the same mission! and please share with me your doubts and concerns!

Problem Twitter Bootstrap Glyphicons not show in Heroku

The rails pipeline with Heroku is something difficult to master…

Today I had a problem that has taken some hours to be fixed.

I precompile assets as usual, and I realised that Glyphicon files have a different extension than the usual .js and .css, so I first had to extend it:

config.assets.precompile += %w( *.js *.css *.eot *.woff *.ttf *.svg )

Then I saw that the files were being produced correctly,


(excerpt of the manifest.json file)

But they did not show in Heroku

GET 404 (Not Found)

Although I could see them:

$ heroku run bash
$ ls public/assets

After some crazy investigation, this video gave me the solution:

You have to put this line in production.rb

config.assets.compile = true

To learn more, check out this excellent resources:

Bootstrap 3 responsiveness and columns classes

While programming the css styles for a responsive page with Bootstrap 3, you will see that there are 4 types of columns: xs, sm, md and lg. You can set, in the same div, the behaviour for each of this screen sizes.

The best thing to avoid repeating the same is to take the smallest one and this will be applied for the rest.

 <div class="col-md-8 col-md-8 col-lg-8"></div>

This will be the same as if you put

<div class="col-sm-8"></div>

Because the sm will be taken as default for all the larger sizes