Bootstrap 4 — How to Customize Your own Theme

Published in

codingcase

4 min readJan 18, 2019

Bootstrap 4 is the new version of bootstrap that is the most popular CSS framework. Bootstrap provide flexible of responsive design solutions. Bootstrap was allowed us to customize the variables of elements, components, grid systems etc.

Bootstrap allowed us customize class using CSS or Sass. But we use Sass to modified variable bootstrap is better than css language. After customization style, we are required some dependency (webpack or node-sass, etc) that can compile sass to css.

Setup Your Project

In this story, I want to guide you customize bootstrap theme with sass and node-sass. Firstly, open your terminal then create initial project with npm init as below:

# Create the project directory
mkdir customize-bootstrap-4# Change into the project directory
cd customize-bootstrap-4# Initialise an NPM package
npm init

The npm init command should reveal an interactive session in the CLI that looks like this:

Complete your configure project by answer in terminal. After answering the questions, a package.json file will be created in the root of the project folder, the content will be similar to this:

{  
   "name": "customize-bootstrap-4",  
   "version": "1.0.0",  
   "description": "customize boostrap 4 your own theme",  
   "main": "index.js",  
   "scripts": {    
       "test": "echo \"Error: no test specified\" && exit 1"  
   },  
   "repository": {    
       "type": "git",    
       "url": "https://github.com/sokhasen/codingcase.git..."  
   },  
   "keywords": [    
       "bootstrap",    
       "css",    
       "sass",    
       "nodejs"  
   ],  
   "author": "sensokha <sensokha.master@gmail.com>",  
   "license": "MIT"
}

install module of dependency

Then, install bootstrap and node-sass module include in dependency. following below:

# install bootstrap and node-sass module
npm install --save bootstrap node-sass

Optionally, if you are working with bootstrap javascript, you can install jquery and popper.js into your project also.

After install required modules, you need to create command in package.json following command below:

{  
   "name": "customize-bootstrap-4",  
   "version": "1.0.0",  
   "description": "customize boostrap 4 your own theme",  
   "main": "index.js",  
   "scripts": {    
       "test": "echo \"Error: no test specified\" && exit 1",
       "scss": "node-sass --watch sass/customize.sass -o dist/css"
   },  
   "repository": {    
       "type": "git",    
       "url": "https://github.com/sokhasen/codingcase.git..."  
   },  
   "keywords": [    
       "bootstrap",    
       "css",    
       "sass",    
       "nodejs"  
   ],  
   "author": "sensokha <sensokha.master@gmail.com>",  
   "license": "MIT",
   "dependencies": {
       "bootstrap": "^4.2.1",
       "node-sass": "^4.11.0"
   }}

Scripts properties in package.json is place to create command line interface that your can command everything what you want to do in your project. An inline "scss": "node-sass --watch sass/customize.sass -o dist/css" tell your node environment to compile sass file to css file.

node-sass: is node module package that provided sass transformation. see more detail.
- -watch: is attribute hot reload sass command when change something in your working file.
-o : is attribute output compiled directory your css file.

Construct your project

Following config package.json , your structure project should be :

# Project Structure
- customize-bootstrap-4
  |_node_modules
  |_dist
  | |_css
  |   |_customize.css
  |_sass
  | |_customize.sass
  |_index.html 
  |_package.json

You can see above structure your project. your customized style at sass/customize.sass. so, inside customize.sass would be import bootstrap variable that you want to override. let’s override color theme bootstrap following code below:

@import '../node_modules/bootstrap/scss/functions'
@import '../node_modules/bootstrap/scss/variables'
/* -------begin customization-------- */$theme-colors: (primary: #1e90ff, secondary:  #1e3799, success: #20bf6b, info:  #0fbcf9, warning:  #e67e22, danger: #ff4757, light:    #dff9fb, dark:  #222f3e);/* -------end customization-------- */
/* finally, import Bootstrap to set the changes! */
@import '../node_modules/bootstrap/scss/bootstrap'

And then, back to terminal type command that you have created above,

# start compiling sass
npm run scss

You will see your compiled css at dist/css/customize.css inside your project. then, link your customize style in your index.html would be here:

<!DOCTYPE html>
<html>
<head>
 <title>customize-bootstrap-4</title>
 <link rel="stylesheet" type="text/css" href="./dist/css/customize.css">
</head>
<body> ......<div class="container">
  <div class="alert alert-primary" role="alert">
    A simple primary alert—check it out!
  </div>
  <div class="alert alert-secondary" role="alert">
    A simple secondary alert—check it out!
  </div>
  <div class="alert alert-success" role="alert">
    A simple success alert—check it out!
  </div>
  <div class="alert alert-danger" role="alert">
    A simple danger alert—check it out!
  </div>
  <div class="alert alert-warning" role="alert">
    A simple warning alert—check it out!
  </div>
  <div class="alert alert-info" role="alert">
    A simple info alert—check it out!
  </div>
  <div class="alert alert-light" role="alert">
    A simple light alert—check it out!
  </div>
  <div class="alert alert-dark" role="alert">
    A simple dark alert—check it out!
  </div>
 </div>
    
 ......</body>
</html>

Awesome !! you can customize everything of bootstrap belongs to your own style.

Conclusion

In sum, Bootstrap 4 is good major of css framework that allowed us override everything what we want. we customize a lot of thing like elements, components, grids, utilities over bootstrap. I used to develop some website with bootstrap. I think this framework is helpful in building the layout interface because they provided a lot components and grid system that is flexible layout and responsive all platforms.