Book Image

Bootstrap 4 Cookbook

By : Ajdin Imsirovic
Book Image

Bootstrap 4 Cookbook

By: Ajdin Imsirovic

Overview of this book

Bootstrap, one of the most popular front-end frameworks, is perfectly built to design elegant, powerful, and responsive interfaces for professional-level web pages. It supports responsive design by dynamically adjusting your web page layout. Bootstrap 4 is a major update with many impressive changes that greatly enhance the end results produced by Bootstrap. This cookbook is a collection of great recipes that show you how to use all the latest features of Bootstrap to build compelling UIs. This book is using the most up-to-date version of Bootstrap 4 in all its chapters. First off, you will be shown how you can leverage the latest core features of Bootstrap 4 to create stunning web pages and responsive media. You will gradually move on to extending Bootstrap 4 with the help of plugins to build highly customized and powerful UIs. By the end of this book, you will know how to leverage, extend, and integrate bootstrap to achieve optimal results for your web projects.
Table of Contents (19 chapters)
Title Page
About the Author
About the Reviewer
Customer Feedback

Customizing the styles of Bootstrap 4 docs

In the previous recipe, we built our own copy of Bootstrap 4 docs, running on Jekyll. In this recipe, we will see how to change the styling of our Bootstrap 4 docs by making simple changes to Sass variables.

Getting ready

For this recipe to work, you need to complete the previous two recipes, Installing Bootstrap 4 to c9 IDE using npm and Installing Bootstrap 4 to c9 IDE via git. The following steps will show you how to tweak the look of the docs by changing some of the Sass variables in the scss folder.

How to do it...

  1. Stop the running Jekyll server by clicking inside the Bash console tab and using Ctrl + C.
  2. Navigate to the scss folder and open the _variables.scss file:
      cd && cd workspace/scss && c9 _variables.scss


In Windows, the path is ../bootstrap/scss/.

  1. Find the Sass variable $enable-rounded, and uncomment the line it is on, so that it looks like this:
      // $enable-rounded: true !default;
  1. On the very next line, paste in the following code:
      $enable-rounded: false !default;


In Sass, using !default is like adding an unless this is already assigned qualifier to a variable. Thus, if you are overriding variables in some other file, make sure that there is no !default after the changed value of false and save the file.

  1. Still in console, change directory into the scss folder by running cd scss command. Then, run the following command:
      sass bootstrap.scss ../dist/css/bootstrap.css

This command will recompile SCSS into CSS for Bootstrap docs.


In Windows, make sure that you run the preceding command from the ../bootstrap/ folder, that is the root, as cloned earlier using git. On, you can utilize multiple Bash console tabs, so there is no need to renavigate to root.

  1. Go back out from the scss folder, by running cd ... Back in the console tab, run the following command:
      bundle exec jekyll serve --watch --host $IP --port $PORT --  
      baseurl ''

When you refresh the webpage, it will now show the homepage with the Download Bootstrap button with sharp edges, instead of rounded ones, as seen in the following screenshot:

  1. Back in the _variables.scss file, override the default values by adding more changes:
      $white: #ddd;
      $enable-rounded: false;
      $spacer: 8rem;
      $font-size-base: 2rem;

You should probably make use of your code editor's search and replace function to complete this step. Once you have completed the step, make sure that you save the file.

  1. Recompile SCSS again by pointing your console to the scss folder with cd scss, then running the command from step 6 once again:
      sass bootstrap.scss ../dist/css/bootstrap.css
  1. Rebuild Jekyll by running:
      bundle exec jekyll build; 
  1. Go into _gh_pages and run Jekyll server:
      jekyll serve --watch --host $IP --port $PORT --baseurl '' 

This should result in the following changes on the docs website: