Custom Bootstrap Themes Using Clarion

Bootstrap is the most popular the world's most popular front-end component library. It provides you with an incredible responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. Creating sites with is is fast and easy. Combining it with the Clarion Style Architecture will make customizing your site scalable and easy to maintain.

Starting Your Project

Before you get started, make sure Clarion is installed:

npm install -g clarion

Create a new project using the Clarion CLI:

clarion new BootstrapProject
cd BootstrapProject

Install Bootstrap (we will be using version 4 for this example):

npm install bootstrap --save

Adding Bootstrap to Your Project

In order to add Bootstrap so it does not clash with the rest of your styles, add the following import statement to your manifest (index.scss) file in the vendors directory:

@import "~bootstrap/scss/bootstrap";

Now, any styles that are added will override the default Bootstrap styles so you can easily customize the library to fit your needs.

Customize Bootstrap

One of the great things about Bootstrap 4 is that all of the variables used in their SASS files use the !default attribute. This means that if you set a value to a variable with the same name Bootstrap will automatically take your value over the value defined in the framework. Now customizing things like colors is incredibly easy!

For example, the variables for colors in Bootstrap 4 look like this:

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;
$theme-colors: (
  primary: $blue,
  secondary: $gray-600,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-800
) !default;

Now you can easily override this by creating a colors file in your Abstracts directory (clarion add abstract colors), pasting in this code, and changing the color values (make sure you remove the !default attribute in your code). The entire framework will now adopt your new color scheme.


The new Bootstrap 4 framework is incredible flexible and Clarion allows you to take advantage in a way that helps you stay organized and with minimal effort.