Compiling and Customizing Bootstrap

[mdabuhasan]

Bootstrap is considered the most popular CSS framework today. You could say it sets the design trend. Its style rules include style reset, grid, and modules. All of this is contained in one file, the assembly of which can be downloaded from the official website. Most developers do this, after which they override Bootstrap's styles with their own.

But this approach is clumsy, because the main style file is quite weighty, and this affects performance. Bootstrap developers provide source files of their product, from which you can make your own style assembly, which will include only what you need. You can change the styling of the entire Bootstrap beyond recognition.
The sources come in .scss files. To get the .css files you're familiar with, you'll need to run them through the SASS compiler. That's it.

Go to the official website https://getbootstrap.com and phone number library on the downloads page find the section marked Source files. Download the archive to your disk. Using an archiver, unzip it to any directory. Go to it, copy the scss directory with all its contents to the root directory of your project. From the entire unpacked archive, we only need the scss directory, so you can safely delete everything else.

Inside scss are all Bootstrap sources, and from them we will compile our styles. Note that almost all files have an underscore at the beginning of their name, with the exception of a few. Files without this prefix are assembly files, they can be compiled as is. They contain paths directly to the sources. For example, if you specify the bootstrap-grid.scss file to the compiler, it will only compile the Bootstrap grid. But the bootstrap.scss file contains paths for the full build. We will start with it. Let's download the compiler first.

There are several options here, but we will take the simplest and fastest way. Go to https://sass-lang.com/install and find the Install Anywhere section. Here you will see a link to GitHub. Follow it. At the time of writing this article, the current version of the compiler was 1.35.1, so the link looked like this: https://github.com/sass/dart-sass/releases/tag/1.35.1 . On the download page, select the release for your operating system. Most often, this is dart-sass-1.35.1-windows-x64.zip.