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


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



Get a version

  • Get Bootstrap
git clone
cd bootstrap
git checkout -b version4.5.0 v4.5.0


  • 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;


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

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



Your integrity value is:


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/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


    "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.


Powered by ComboStrap