Creating a customized version of bootstrap using .less. Overriding base bootstrap styles explained! Can also use .sass instead of .less. But the bootstrap peoples support the .less version directly


What is bootstrap:


We currently use the bootstrap-less NPM Package.  


Less is a “precompiler” language used to define css styles in a programmatic way to reduce redundancies and hopefully make css more maintainable.


What is LESS:


We mainly just want to import only the bootstrap .less files containing only the features we use, into our own custom version of Bootstrap


Usually located:  …\client-assets\less\bootstrap-custom.less

*And thus this file acts as a wrapper for bootstrap AND a place to put custom theme style definitions, optionaly.


This file starts with the aforementioned import statements.


// Core variables and mixins

@import "../../node_modules/bootstrap-less/bootstrap/variables.less";

... blah blah


// Core CSS

@import "../../node_modules/bootstrap-less/bootstrap/scaffolding.less";

... blah blah


Then below that, we can apply any “overrides” of the bootstrap .less code or, alternatively, regular CSS code definitions that will override the same definitions declared in the final compiled bootstrap-custom.css file.


*That way we don’t touch the original bootstrap source code.  Which will make is seamless for us to drop new versions of bootstrap when they become available.


Then later in the file we have:

Ex. less overrides

// Navbar links

@navbar-default-color: #fff;

@navbar-default-link-color: #fff;


These are actually originally declared in the node_modules\bootstrap.less\bootstrap\variables.less

When both of these files are compiled by a GULP command, they will be regular css.

And our less overrides (since they appear later in this file) will win out.

Also for regular CSS, later css declarations win over prior declarations with the same name


Also later in the file:


/*Bootstrap Forms Overrides*/

// override .horizontal-form .control-label to be left aligned

.control-label {

   text-align: left !important;


When referencing CSS Stylesheet files


Ex.  in the our template _layout.cshtml file or index.cshtml you can declare the following css stylesheets in this order.


<link href="~/css/bootstrap.css" rel="stylesheet" asp-append-version="true" />

<link href="~/css/bootstrap-custom.css" rel="stylesheet" asp-append-version="true" />


Style Definitions in later files (i.e. bootstrap-custom.css) will always win out.


But in our case, our gulp command will actually combine all the imported bootstrap .less files and our bootstrap-custom.less file AND output 1 file that we’ll reference in _layout.cshtml


So if a developer modifies the bootstrap-custom.less file, when they are done, they should immediately run in the command line: gulp less


This will compile the less and output a .css file in the wwwroot\css folder with the same name:  bootstrap-custom.css


Then we ensure we have the reference to our 1 compiled .less file in our html code:


<link href="~/css/bootstrap-custom.css" rel="stylesheet" asp-append-version="true" />


This process could be enhanced further, and be run on a build server for Continuous Integration/Delivery with your Build Software of choice.  We've used Jenkins.  Can have it dynamically inject the css link into your html file at this time as well. 


Comments are closed