Customize Bootstrap’s components, Less variables, and jQuery plugins to get your very own version.

A question that can arise when someone intend to use Bootstrap toolkit is “should I let boostrap as it is, or customize it?”. Or maybe you don’t have this issue in mind. That is you have simply found it is suitable to use Twiter Bootstrap to improve the responsive aspect of your site by using a widely considered CSS/JS toolkit. Thus, you have solely embed the Bootstrap toolkit on your webpage template.

Such behavior is only suitable for quick testing, designing and developing a new layout. But for a website in production, from my point of view, it is important to select from such toolkit only what you need for your website. Otherwise you will increase your website payload and downgrade your site performance. For example, do you use a ‘carroussel’, ‘jumbotron’ in all your page? Actually, Bootstrap toolkit file size is about169ko (minified:138ko ). For my site, the sole Bootstrap toolkit part is of116ko (minified:93ko ). As you see the payload is significantly reduced. Secondly, by editing the default Bootstrap, you open a way to customization of the toolkit to fit your will.

However, in some (few) cases, using the original bootstrap toolkit Bootstrap toolkit can be suitable. Basically, using the basic Bootstrap toolkit enable the possibility of using it through CDN to access to it, and improving the HTTP request.

But in any case: do not reinvent the wheel! unless your a (great) web-developper (especially in CSS/JS design) I don’t recommand to write a toolkit. Actually, by using a toolkit (such as Bootstrap or whatever) you can benefit of updates and bugs correction.

How to simplify Bootstrap usage

If you have a look to bootstrap.scss from Bootstrap source or you can shown it on the Githup page

 1 /*!
 2  * Bootstrap v4.0.0 (
 3  * Copyright 2011-2018 The Bootstrap Authors
 4  * Copyright 2011-2018 Twitter, Inc.
 5  * Licensed under MIT (
 6  */
 8 @import "functions";
 9 @import "variables";
10 @import "mixins";
11 @import "root";
12 @import "reboot";
13 @import "type";
14 @import "images";
15 @import "code";
16 @import "grid";
17 @import "tables";
18 @import "forms";
19 @import "buttons";
20 @import "transitions";
21 @import "dropdown";
22 @import "button-group";
23 @import "input-group";
24 @import "custom-forms";
25 @import "nav";
26 @import "navbar";
27 @import "card";
28 @import "breadcrumb";
29 @import "pagination";
30 @import "badge";
31 @import "jumbotron";
32 @import "alert";
33 @import "progress";
34 @import "media";
35 @import "list-group";
36 @import "close";
37 @import "modal";
38 @import "tooltip";
39 @import "popover";
40 @import "carousel";
41 @import "utilities";
42 @import "print";

As you can see, many of the above default import are not necessary for all website, and not for all webpage. From Bootstrap v4 documentation you can get the “minimal” bootstrap components:

 1 // Required
 2 @import "node_modules/bootstrap/scss/functions";
 3 @import "node_modules/bootstrap/scss/variables";
 4 @import "node_modules/bootstrap/scss/mixins";
 6 // Optional
 7 @import "node_modules/bootstrap/scss/reboot";
 8 @import "node_modules/bootstrap/scss/type";
 9 @import "node_modules/bootstrap/scss/images";
10 @import "node_modules/bootstrap/scss/code";
11 @import "node_modules/bootstrap/scss/grid";

Of course, if you would like to have special stuff from Bootstrap (such as button, alert, or whatever) you can add it to your customized theming.