Before you can build Bootstrap from source, you need to download the source from the project website. Once you have downloaded the source and opened the package, you will see that the source package contains a large number of directories and files. You need to perform the following steps in order to build Bootstrap from source:
- Unzip the package you downloaded in a location where you can easily find it. Create a new folder named
lessfor the LESS files in your project and abootstrapfolder within that folder. Copy the contents of thelessfolder from the files that you just unzipped, and place it in thebootstrapfolder, which is inside thelessfolder. - Create an entry LESS file called
main.lessunder thelessdirectory and add the following content:@import "bootstrap/bootstrap";
This will include the Bootstrap entry file, which includes all of the Bootstrap features and produces exactly the same result as when you use the default
bootstrap.cssfile. - Run the following command in the root of your project to use RECESS to compile your styles:
recess less/main.less --compile > css/main.cssThis will compile your LESS file, including all of the Bootstrap features into a
main.cssfile under thecssdirectory in your project. - Open
index.htmland remove the following lines:<link href="css/bootstrap.min.css" rel="stylesheet"/> <link href="css/custom.css" rel="stylesheet"/>
- Add the following line instead:
<link href="main.css" rel="stylesheet"/>
Now, when you reload the project, it will look exactly like it did before you added any customizations, and it now uses your own custom build of Bootstrap that you just compiled with RECESS, as shown in the following screenshot:
Next, you will restore the customizations that you already created in Chapter 2, Applying a Custom Theme, and add a few new ones. Now that you are using LESS, it will be easier to apply customizations to your project.