Working with Bootstrap LESS

Working with Bootstrap LESS files is an excellent way to create a customized Bootstrap webdesign.

This tutorial describes how to make changes to the LESS files without having to re-do all or part of your hard work when Bootstrap releases an update.

Basic Bootstrap LESS Setup

Download and unzip the LESS files folder from Bootstrap’s GitHub repository.

Drag and drop the LESS folder into the Crunch editor (or the project folder for the new theme with a sub folder containing the LESS files).
Crunch app with bootstrap less files
We then create a new file. For the naming of the new file(s) you can use several methods:

  • give it the name of the file you are going to customize plus “_custom.less”. This way you can directly see which files have been customized because of their (_custom) doubles.
  • use its name but with an underscore ( “_”) before it (e.g. “_alerts.less”). This has the advantage that the customized files will all show at the top of the list.

Use @import to import the original file into our custom version.

crunch with custom file and import code

After the @import you can then add the LESS code you need for the new file.


As I explained in a previous tutorial (about the structure of the Bootstrap LESS files) the file “bootstrap.less” brings it all together. This is the file you let Crunch compile into the CSS style sheet.

The “bootstrap.less” file contains @import‘s for the other LESS files. In my experience the easiest method is to make a copy of the file and rename it into either “bootstrap_custom.less” or “_bootstrap.less”. That way you can edit the contents of the file:

  • To get a file optimized for loading you delete all the @import lines for components and plugins you don’t use in your theme.
  • For the customized files you insert their new names behind the @import.

When a new version of Bootstrap is released you now only need to replace the original LESS files. And copy and re-create the customized “bootstrap.less” file before compiling it into the updated CSS style sheet.

Add your comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.