Customizing Bootstrap 3
By Jean-Claude Colette Jan 19, 2018
Here we explain how to install Bootstrap 3 and how to customize it. We expose several methods of customization.
We'll see how to properly install Bootstrap 3 and customize it.
You should definitely ask yourself why not install Bootstrap 4 Beta, the new version of Bootstrap.
For now, Bootstrap 4 is in beta version and only works on the latest browsers. Therefore, if you are using Bootstrap for a Web site, it is more prudent to take the stable 3.3.7 version of Bootstrap so that the site can be accessed from as many browsers as possible. However, it may not be necessary to take care of all the old versions of browsers, for example Microsoft announces in 2016 that it will not support Internet Explorer 8, 9 and 10 longer. It should be noted that in December 2017, IE8 accounted for less than 0.2% of the browsers used (https://clicky.com/marketshare/global/web-browsers/internet-explorer/).
But depending on the target of a site, the percentage of visitors using an old browser can be very large. The disadvantage of supporting older versions of browsers is to have to load a 1.11.0 or lower version of JQuery, a bit slower than the newer ones, which prevents you from taking advantage of some more advanced Bootstrap features.
Browsers are increasingly complying with WEB standards but this is not the case for all, in particular most of those used on mobiles.
Bootstrap 3 Installation
Creating an HTML Template
<head> <link href="Content/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Bootstrap</h1> <script src='/Scripts/jquery-1.11.3.min.js'></script> <script defer='' src='/Scripts/bootstrap.min.js'></script> </body>
You will realize that it is necessary to customize Bootstrap after installation. Because Bootstrap is very much used, and often with the default style, your site will not be very original. Moreover this style may not be suitable for your site.
There are several Bootstrap customization methods:
- It is possible to find themes (free or paid) for each version of Bootstrap.
- The often recommended method is to add a CSS style sheet in which some Bootstrap classes are overloaded.
- The third method requires a download of Bootstrap source files and the installation of tools such as node.js (with npm) and Grunt, and consists of modifying some source files and recompiling the whole.
In the first case, if you want to install a ready-to-use theme, make sure it matches exactly the desired Bootstrap version. Also check before acquiring a theme that it is not buggy and that it runs correctly on all browsers. Free themes can be found at: https://bootswatch.com/.
The second method often raises problems of slowness because there is one more CSS file to load. In addition, this file can be quite cumbersome when the theme modifies many properties of the Bootstrap classes.
In the third case,
npm install -g grunt-cli.
In the root /Boostrap/ directory, run
npm installto automatically install the dependencies listed in the package.json file.
Once the installation is complete you will be able to generate the .css and .js files with the
grunt dist command.
To edit the .css, .less, .scss files I recommend that you use Visual Studio or Visual Studio Code. You can directly edit .less (or .scss) files or to keep your work easier, clone some of these files beforehand.
Bootstrap is reputed to be quite heavy and often we start by deleting some componants.
Simply edit the bootstrap.less file (or bootstrap.scss), deleting some componants deemed unnecessary.
To customize the colors we can also change the file variables.less (or variables _variables.scss)