ComboStrap Styling - How to create and add your own Bootstrap stylesheet

Table of Contents

About

This article shows you how to create and install your own custom Bootstrap Stylesheet (theme) to fit your styling needs.

  • This article was written for Bootstrap 4 but the steps should be relatively the same for Bootstrap 5
  • This was the steps taken to create the 16 grid Stylesheet.

If you want to modify the styling once, you can also do it via attributes

Prerequisites

Steps

Get a version

  • Get Bootstrap
git clone https://github.com/twbs/bootstrap.git

cd bootstrap
git checkout -b version4.5.0 v4.5.0

Install

  • Install the package dependencies
npm install

Modify the SCSS Variable file

You modify a theme by giving your own sass variable in the file scss/_variables.scss

The naming convention is $name-state-property-modifier where:

  • name is the component name corresponding to the given class name (e.g .alert)
  • state is the pseudo-class used to define a special state of an element (e.g: hover, active, checked etc)
  • property is the given CSS property in order to achieve the results you need (e.g: color, background, display)
  • modifier is used to define additional information for the current property, like sizes, axis (e.g alert-sm, alert-padding-y)

Every Sass variable in Bootstrap 4 includes the !default flag allowing you to override the variable’s default value in your own Sass.

Example with a grid of 16 columns with a max width of 1280px 

$grid-columns:                16 !default;


$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1280px
) !default;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
) !default;

Optionally for a better contrast, you can change the blue color. 

$blue:    #075ebb !default;

Compile

npm run dist
# or just for css
npm run css

Grab the stylesheet

In the sub-directory dist\css, you can find the files:

  • bootstrap.min.css
  • bootstrap.min.css.map

Calculate the integrity

Optional but recommended

The integrity field permits to control that the stylesheet file was not tempered during the network transit. 

# go to the bootstrap source code directory
cd bootstrap/dist/css
# generate a sha384
openssl dgst -sha384 -binary bootstrap.min.css | openssl base64 -A

Output: 

6YMUsimvBMWMU6VPmQwCKP28RrKPSaSaD48Hfabk1yxb5zQZ21XDRL/vljin9SZ3

Your integrity value is: 

sha384-6YMUsimvBMWMU6VPmQwCKP28RrKPSaSaD48Hfabk1yxb5zQZ21XDRL/vljin9SZ3

Install your new stylesheet

To install your new stylesheet, you need to:

Copy the custom style sheet

The bootstrap folder of strap are organised by bootstrap versions 

dokuwiki/lib/tpl/strap/bootstrap/${version}

Example:

  • dokuwiki/lib/tpl/strap/bootstrap/4.5.0 for the version 4.5.0
  • dokuwiki/lib/tpl/strap/bootstrap/4.4.1 for the version 4.4.1

Take the custom stylesheet bootstrap.min.cs created an copy it to the strap bootstrap folder. In this example in dokuwiki/lib/tpl/strap/bootstrap/4.5.0

Define the custom stylesheet

strap uses a json file system to manage the stylesheet available.

  • create the file bootstrapLocalCss.json in the bootstrap folder of Strap. You can also copy the bootstrapCustomCss.json

The bootstrapLocalCss.json is a file that is not part of the strap distribution and will not be overwritten between upgrade. This is why you need to create a new file. It would have possible to modify the file bootstrapCustomCss.json but as this file is overwritten for each upgrade, you would have lose your custom configuration

Example: 

{
    "4.5.0": {
        "my-custom-bootstrap": {
            "file": "bootstrap.custom.min.css",
            "integrity": "sha384-6YMUsimvBMWMU6VPmQwCKP28RrKPSaSaD48Hfabk1yxb5zQZ21XDRL/vljin9SZ3"
        }
    }
}

change the bootstrapStylesheet configuration

The last step is to change the ComboStrap - Bootstrap configuration.

Documentation

Powered by ComboStrap