Customize Bootstrap

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 or jumbotron in all your pages? Actually, Bootstrap toolkit file size is about 169 ko (minified: 138 ko). For my site, the sole Bootstrap toolkit part is of 116 ko (minified: 93 ko). 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-developer (especially in CSS/JS design) I don’t recommend to write a toolkit. Actually, by using a toolkit (such as Bootstrap or whatever) you can benefit of updates and bugs correction.

/*!
-   Bootstrap v4.0.0 (<https://getbootstrap.com>)
-   Copyright 2011-2018 The Bootstrap Authors
-   Copyright 2011-2018 Twitter, Inc.
-   Licensed under MIT (<https://github.com/twbs/bootstrap/blob/master/LICENSE>)
    */
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "utilities";
@import "print";

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";