Bootstrap LESS files structure

Bootstrap 3 now uses only one style sheet. This style sheet is compiled from quite a few Bootstrap LESS files. Understanding how these files are related to one another if you want to use them to customize a Bootstrap theme.

LESS files

First we need to get our hands on the LESS files. The easiest way to do this is visit Bootstrap on GitHub. You’ll see a button on the right with “Download ZIP”. Clicking this button will download the file “”.
This zip file contains more than we actually need for this tutorial. You only need to extract the less folder.

Structure of LESS files

When you open the folder “less” you will see quite a few files. These are simply ordered alphabetically: “alerts.less”, “badges.less”, “bootstrap.less”, etc.

So that doesn’t tell us anything useful about the relationships between the files. The best way to understand how they are related is by opening the file ‘bootstrap.less”.

Open “bootstrap.less” in Crunch (see previous tutorial about LESS compilers).

You will see something like this (not all of the actual files are mentioned below because we’ll focus on the structure):


The first file that is imported in “bootstrap.less” is “variables.less”. This file sets all the variables used in the other files. You’ll find the color variables with their values in this file, etc.

If you haven’t yet read the section about variables in my tutorial about Styling with LESS this is a good moment to do so.


I don’t think I need to explain here why a reset is important when creating a style sheet.

Core CSS

The section Core CSS contains several LESS files. In this tutorial we’ll only take a peek at the “scaffolding” LESS file (it isn’t that long anyway so a quick peek will certainly be enough).

As you can see the file also contains a few resets. And several of these resets are done with the variables from the “variables.less” file.

Any Bootstrap theme should at least be based on the files in the sections we discussed so far.


Not surprisingly the section “components” is used to import all of the less files that were created to style individual Bootstrap components.

This section is a good place to start when you want to improve the loading time of your theme. Delete the lines used to import components you don’t actually use in your theme.

Components with JavaScript

This section is used to import the jQuery plugins.

Check this to before actually taking your theme in production and delete the import’s for plugins you don’t use.

Utility classes

Although the “utility classes” section is at the end that doesn’t mean these files are not important. My advice is to always leave these imports. Unless you really don’t want a responsive layout. Then you can safely delete the import for the “responsive-utilities“.

The first import is important because it provides you with classes you’ll probably find very useful while creating your layout:

In the next tutorial we’ll examine the best approach to customize a Bootstrap theme while leaving the original LESS files intact.

Add your comment