This article is written by Aravind Shenoy and Ulrich Sossou, the authors of the book, Learning Bootstrap. It will introduce you to the concept of deep customization of Bootstrap.

(For more resources related to this topic, see here.)

Adding your own style sheet works when you are trying to do something quick or when the modifications are minimal. Customizing Bootstrap beyond small changes involves using the uncompiled Bootstrap source code. The Bootstrap CSS source code is written in LESS with variables and mixins to allow easy customization.

LESS is an open source CSS preprocessor with cool features used to speed up your development time. LESS allows you to engage an efficient and modular style of working making it easier to maintain your CSS styling in your projects.

The advantages of using variables in LESS are profound. You can reuse the same code many times thereby following the write once, use anywhere paradigm. Variables can be globally declared, which allows you to specify certain values in a single place. This needs to be updated only once if changes are required.

LESS variables allow you to specify widely-used values such as colors, font family, and sizes in a single file. By modifying a single variable, the changes will be reflected in all the Bootstrap components that use it; for example, to change the background color of the body element to green (#00FF00 is the hexadecimal code for green), all you need to do is change the value of the variable called @body-bg in Bootstrap as shown in the following code:

@body-bg: #00FF00;

Mixins are similar to variables but for whole classes. Mixins enable you to embed the properties of a class into another. It allows you to group multiple code lines together so that it can be used numerous times across the style sheet. Mixins can also be used alongside variables and functions resulting in multiple inheritances; for example, to add clearfix to an article, you can use the .clearfix mixin as shown in the left column of the following table. It will result in all clearfix declarations included in the compiled CSS code shown in the right column:

Mixin	CSS code
article { .clearfix; }	{ article:before, article:after { content: " "; // 1 display: table; // 2 } article:after { clear: both; } }

A clearfix mixin is a way for an element to automatically clear after itself, so that you don't need to add additional markup. It's generally used in float layouts, where elements are floated to be stacked horizontally.

Let's look at a pragmatic example to understand how this kind of customization is used in a real-time scenario:

Download and unzip the Bootstrap files into a folder.

Create an HTML file called bootstrap_example and save it in the same folder where you saved the Bootstrap files. Add the following code to it:

<!DOCTYPE html>
<html>
<head>
<title>BootStrap with Packt</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
 scale=1.0">
<!-- Downloaded Bootstrap CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- JavaScript plugins (requires jQuery) -->
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/
 jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>Welcome to Packt</h1>
<button type="button" class="btn btn-default btn-lg" 
 id="packt">PACKT LESSONS</button>
</body>
</html>

The output of this code upon execution will be as follows:

deep-customization-bootstrap-img-0

The Bootstrap folder includes the following folders and file:
- css
- fonts
- js
- bootstrap_example.html
This Bootstrap folder is shown in the following screenshot:

Since we are going to use the Bootstrap source code now, let's download the ZIP file and keep it at any location. Unzip it, and we can see the contents of the folder as shown in the following screenshot:

Let's now create a new folder called bootstrap in the css folder. The contents of our css folder will appear as displayed in the following screenshot:

Copy the contents of the less folder from the source code and paste it into the newly created bootstrap folder inside the css folder. Thus, the contents of the same bootstrap folder within the css folder will appear as displayed in the following screenshot:

In the bootstrap folder, look for the variable.less file and open it using Notepad or Notepad++. In this example, we are using a simple Notepad, and on opening the variable.less file with Notepad, we can see the contents of the file as shown in the following screenshot:

Currently, we can see @body-bg is assigned the default value #fff as the color code. Change the background color of the body element to green by assigning the value #00ff00 to it. Save the file and later on, look for the bootstrap.less file in the bootstrap folder. In the next step, we are going to use WinLess.

Open WinLess and add the contents of the bootstrap folder to it. In the folder pane, you will see all the less files loaded as shown in the following screenshot:

Now, we need to uncheck all the files and only select the bootstrap.less file as shown in following screenshot:

Click on Compile. This will compile your bootstrap.less file to bootstrap.css. Copy the newly compiled bootstrap.css file from the bootstrap folder and paste it into the css folder thereby replacing the original bootstrap.css file.

Now that we have the updated bootstrap.css file, go back to bootstrap_example.html and execute it. Upon execution, the output of the code would be as follows:

Thus, we can see that the background color of the <body> element turns to green as we have altered it globally in the variables.less file that was linked to the bootstrap.less file, which was later compiled to bootstrap.css by WinLess.

We can also use LESS variables and mixins to customize Bootstrap. We can import the Bootstrap files and add our customizations.

Let's now create our own less file called styles.less in the css folder. We will now include the Bootstrap files by adding the following line of code in the styles.less file:
```
@import "./bootstrap/bootstrap.less";
```
We have given the path,./bootstrap/bootstrap.less as per the location of the bootstrap.less file. Remember to give the appropriate path if you have placed it at any other location.

Now, let's try a few customizations and add the following code to styles.less:

@body-bg: #FFA500;
@padding-large-horizontal: 40px;
@font-size-base: 7px;
@line-height-base: 9px;
@border-radius-large: 75px;

The next step is to compile the styles.less file to styles.css. We will again use WinLess for this purpose. You have to uncheck all the options and select only styles.less to be compiled:

On compilation, the styles.css file will contain all the CSS declarations from Bootstrap. The next step would be to add the styles.css stylesheet to the bootstrap_example.html file.So your HTML code will look like this:

<!DOCTYPE html>
<html>
<head>
<title>BootStrap with Packt</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
 scale=1.0">
<!-- Downloaded Bootstrap CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- JavaScript plugins (requires jQuery) -->
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/
 jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<h1>Welcome to Packt</h1>
<button type="button" class="btn btn-default btn-lg" 
 id="packt">PACKT LESSONS</button>
</body>
</html>

The output of the code is as follows:

deep-customization-bootstrap-img-10

Since we changed the background color to orange (#ffa500), created a border radius, and defined the font-size-base and line-height-base, the output on execution was as displayed in the preceding screenshot.

The LESS variables should be added to the styles.less file after the Bootstrap import so that they override the variables defined in the Bootstrap files. In short, all the custom code you write should be added after the Bootstrap import.

Summary

Therefore, we had a look at the procedure to implement Deep Customization in Bootstrap. However, we are still at the start of the journey. The learning curve is always steep as there is so much more to learn. Learning is always an ongoing process and it would never cease to exist. Thus, there is still a long way to go and in a pragmatic sense, the journey is the destination.