Twitter Bootstrap is the most popular CSS framework. It has been so since its first release in 2011. Its constantly rising popularity begs the question: what aspect of it allows room for the different look and feel of millions of websites that are built on top of it? In this article, I demonstrate how to modify Bootstrap 4 according to a design that has its own color theme, responsive breakpoints and spacing styles. Getting Started I am new to front-end development. And I came across Bootstrap a few years ago. After doing some initial reading about its content and documentation, I kept wondering how its customization works. Last few weeks saw me working on a couple of Bootstrap and Sass projects, and one of them involved using SCSS to customize Bootstrap 4 based on the design I received. I’m presenting my learning in this write-up. Pre-requisites First things first: if you Googled for this article using “customize Bootstrap 4” or similar keywords, I take it for granted that you have a strong foundation in HTML5 and CSS3, and you have completed at least one project that significantly covered the Bootstrap 4 documentation. Also, some basic understanding of Sass is essential, especially about variables, mixins, value types (maps, functions) and loops. Secondly, modification of Bootstrap requires either downloading or installing the framework to your project folder. In my case, I have npm available globally and I used it to install Bootstrap 4 into my workspace. npm bootstrap install Bootstrap Filesystem Upon installing Bootstrap 4, I have a folder structure that looks like this: project-folder/
├── node_modules/
    └── bootstrap/
        ├── js
        └── scss Next, inside my project directory, I create a folder to hold my custom Sass/CSS files. This custom folder should be outside the directory — as it is advised to keep the custom files isolated from Bootstrap’s core files. node_modules project-folder/
├── node_modules/
│   └── bootstrap/
│       ├── js
│       └── scss
└── bs-custom/
    ├── overrides.scss
    └── main.scss The _variables.scss File Bootstrap 4’s core files include a file named . This is the file that contains all the variables that we will modify in order to customize Bootstrap. _variables.scss The overrides.scss File Moving on from there, I create an (or one with any other descriptive name) file inside the custom folder. This file will be the base where I override the default Bootstrap variables originally contained in the file. We’ll come to that in a minute. But before that, I should start navigating into the Bootstrap core folder to import the Sass files necessary for my project. overrides.scss _variables.scss To begin with, you can import the whole of Bootstrap for the sake of learning. However, once you have got enough practice, it is recommended that you import only the ones that you need for your project — because it helps reduce the size of the resulting CSS file that is shipped to the client side. @ ; // overrides.scss // Option 1: Import all Bootstrap files import "../node_modules/bootstrap/scss/bootstrap" Granted I use only the parts of Bootstrap that I need, imports are divided into two chunks: Required and Optional. Notice that the file is among the mandatory files. _variables.scss @ ;
@ ;
@ ; @ ;
@ ;
@ ;
@ ;
@ ;
.
.
. // overrides.scss // Option 2: Import only the files you need // Mandatory 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" The main.scss File Then, I create a file inside the custom folder. This file is where I will import the file and style any necessary non-Bootstrap classes. This is the file that will ultimately precompile and generate the stylesheet that I will link to my HTML page. main.scss overrides.scss @ ; // main.scss // Import overrides.scss import "./overrides.scss" The Defaults If you survey the file in your code editor, you will notice that all the variables contain a CSS flag. This is self-explanatory, and suggests that they can all be overridden. This is what gives Bootstrap the power to make space for creating unique websites. _variables.scss !default Notice that has 1100+ lines, indicating the number of variables available for modification. I suggest you scan through the file and see what variables are out there. The variable names are quite descriptive, so they should give you some insight into what they represent. _variables.scss Overriding the Defaults Now that I have everything set up and well-figured-out, it’s time to get my hands dirty and start modifying some variables in the file. overrides.scss It is worth mentioning at this point that, since overridden variables will be used globally, they need to be declared at the top of the file — above the declarations. overrides.scss @import Changing Colors Colors are the most noticeable aspect of a design. So, I’ll start with modifying the color variables. Theme Colors For my project, I have a scheme composed of three colors. So, I create three variables and assign them their respective colors. $grocery-pink: #d65649;
$grocery-gray: # ;
$grocery-black: # ; //overrides.scss 444 000 Next, I need to adjust the map accordingly. I do that by overriding the and variables in the file. $theme-colors $primary $secondary overrides.scss $primary: $grocery-pink;
$secondary: $grocery-gray;
$tertiary: $grocery-black; Modifying these variables automatically updates the map to adopt the newly assigned colors. $theme-colors $theme-colors: () ! ;
$theme-colors: map-merge(
  ( :    $primary, :  $secondary, :    $success, :       $info, :    $warning, :     $danger, :      $light, :       $dark
  ),
  $theme-colors
); default "primary" "secondary" "success" "info" "warning" "danger" "light" "dark" Then, I need to insert my tertiary color as an additional item in the map. Like so: $theme-colors $theme-colors: ( : $tertiary
); "tertiary" Notice how easy it is to add a new item. You just place the key-value pair inside the map and it is concatenated to the end. Since I changed the and values, their respective defaults ( and ) are lost. If I need them back, I can just append them at the end of the map using the addition method shown above. $primary $secondary $blue $gray-600 $theme-colors So, what have I affected with these few changes? It turns out, quite a number of things. By changing the variable, I have changed the default text color of my links and pagination, the focus box shadow of my form inputs, the default background color of buttons in forms, jumbotron, cards, modals and more. $primary Modifying the and variables also changed the primary and secondary variants of color utilities for text, backgrounds, alerts, buttons, badges, tabs, pills and so on. $primary $secondary Additional Colors There is a set of more color variables that can be used to style non-Bootstrap classes. These variables also incorporate a map. This map is used to define a Sass function that loops through the map and generates individual values from it. Then these color values as well can be used to style non-Bootstrap classes. $colors $blue:    # bff ! ;
$indigo:  # f2 ! ;
$purple:  # f42c1 ! ;
$pink:    #e83e8c ! ;
$red:     #dc3545 ! ;
$orange:  #fd7e14 ! ;
$yellow:  #ffc107 ! ;
$green:   # a745 ! ;
$teal:    # c997 ! ;
$cyan:    # a2b8 ! ; 007 default 6610 default 6 default default default default default 28 default 20 default 17 default Obviously, you can also replace the values of these variables with your own version of the colors — as well as add new colors to this list. You’ll need to remove the flag there. !default Functions and loops are also used to derive shades and contrast of these colors, but I decided not to delve into them in this article. If you feel the need to use them, please read in the Theming Bootstrap page. this section Modifying Responsive Breakpoints Bootstrap has five screen sizes. $grid-breakpoints: (
 xs: , : px, : px, : px, : px
) ! ; 0 sm 576 md 768 lg 992 xl 1200 default For my project, I only need three screen sizes: mobile: up to 768pxt ablet: up to 1024px desktop: from 1024px So, I need to remove two items from the map: and $grid-breakpoints “xs” “xl”. However, removing an item from a map is a bit tricky in Bootstrap. We have to use the function in Sass, and we have to place the code in between the Mandatory and Optional @import declarations in the overrides.scss file. map-remove() @ ;
@ ;
@ ;

$grid-breakpoints: map-remove($grid-breakpoints, xs, xl); @ ;
@ ;
.
.
. // Mandatory 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" I also change the value of the key to and that of the key to : “sm” 0 “lg” 1024px $grid-breakpoints: (
 sm: , : px
); 0 lg 1024 But it turns out that this change does not produce the classes that I need. “-md-” The reason is not clear to me (if you know, please leave a comment), but it may be due to the mixin that ensures the map items are in an ascending order. The order of the above code probably disrupts that of the map and hence classes are not created. _assert-ascending $grid-breakpoints “-md-” @include _assert-ascending($grid-breakpoints, “$grid-breakpoints”); When I add the breakpoint with its already defined value in-between and , classes appear in the file. “md” “sm” “lg” “-md-” main.css $grid-breakpoints: (
 sm: , : px, : px
); 0 md 768 lg 1024 So what are the results of these changes? Clearly, my large screen breakpoint has now moved to 1024px, from 992px. Besides, if I search in file, the removal of the item wiped off all the responsive utility classes for this particular breakpoint. For example, all the classes are gone. Similarly, classes for flex and text-alignment utilities also disappeared. main.css “xl” “col-xl-” “-xl-” This helps reduce the size of the compiled CSS file. Container Max-widths It is possible to set the maximum width of a container for a particular screen size. Bootstrap’s defaults are: $container-max-widths: (
 sm: px, : px, : px, : px
) ! ; 540 md 720 lg 960 xl 1140 default I’ll remove the and items and change this map to: “sm” “xl” $container-max-widths: (
 md: px, : px
); 750 lg 1010 Once again, here’s how to remove items from a map: @ ;
@ ;
@ ;

$grid-breakpoints: map-remove($grid-breakpoints, xs, xl);
$container-max-widths: map-remove($container-max-widths, sm, xl); @ ;
@ ; // Mandatory 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" Spacing Utilities Margin and Padding Bootstrap’s spacing classes (those starting with and ) are styled based on the map: “m” “p” $spacers $spacers: map-merge(
 ( : , : ($spacer * ), : ($spacer * ), : $spacer, : ($spacer * ), : ($spacer * )
 ),
 $spacers
); 0 0 1 .25 2 .5 3 4 1.5 5 3 I’ll change the value of and add a sixth item: 4 $spacers: ( : ($spacer * ), : ($spacer * )
); 4 2 // New item 6 4 This changes the values of 4th level margin and padding ( , , , , etc.) utilities from to . This also adds a new generation of padding and margin classes that end with . mt-4 mb-4 px-4 py-4 1.5rem 2rem “-6” Gutter Width I’ll slightly change the column gutters. a side looks too wide for me. I’ll bring it down to by setting the to . 15px 10px $grid-gutter-width 20px $grid-gutter-width: px; 20 Vertical Margin of <hr> Finally, I’ll set the vertical margin of hr tags to 0.625rem: $hr-margin-y: $spacer * ; 0.625 The Way Forward I hope the above examples have shed some light on to how Bootstrap 4 variables are customized to match a specific design. A lot more can be changed. You can modify typographic properties like font families, font sizes, font-weight, and so on. You can tweak border colors, radius, box shadows, etc. You can change the look and feel of tables, forms, buttons, modals, and all other components. But to make them happen, you will need to thoroughly examine the file and figure out what can be modified. You will need to understand how functions and loops are used to generate CSS classes from various maps defined in the file. Some variables are dependent on other variables, so you’ll need to understand those dependencies in order to able to manipulate them effectively. _variables.scss Below, I list some articles that helped me understand the concepts when I was researching the topic. I assume they will also guide you in getting a clear idea about how Bootstrap customization works. Bootstrap 4 Customization Checklist Theming Bootstrap How to customize Bootstrap 4 using Sass How to Customize Bootstrap 4 with Sass Bootstrap 4 CSS customization Learn About Sass Variables for Customizing in Bootstrap 4 Wrapping Up Bootstrap’s power lies in its ability to be tailored according to the individual designs that site builders implement. Almost anything can be personalized by overriding the variables in the file. Changing these variables can dramatically alter the look and feel of a website. _variables.scss In this article, we saw how colors, responsive breakpoints and some spacing utilities can be modified in order to achieve a site’s design goals. The examples shown were intended to provide some initial guidance so that you can then opt for customizing the framework more comprehensively. If you found this article helpful, please feel free to give it a like/clap/thumbs up. That would mean a lot to me. Comments and suggestions are welcome. I am new to writing, so your feedback will help me a lot. Previously published at https://medium.com/@anewman15/customize-bootstrap-4-according-to-your-design-949596d4f2dd

ORANGE

Twitter

Yellow

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Bootstrap 4 Customization According to Your Design

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

6 VueJS Admin Templates With Cool UX Design You Should Check Out

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

6 VueJS Admin Templates With Cool UX Design You Should Check Out

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps