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
cd <your-project>

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.

SASS Mixins and Functions

You can also inject Bootstrap's SASS mixins and funtions by adding a reference to them in to your 00_Abstracts directory (either explicitly in their own file or directly in the manifest file). This will give you access to that functionality throughout your project.

For exaple, of you wanted to leverage Bootstrap's mixin for media queries, you could add a reference to that SCSS file ( @import '~/bootstrap/scss/mixins/breakpoints') and begin using the media-breakpoint-down(), media-breakpoint-between(), and media-breakpoint-only() anywhere in your SCSS project.


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.