howto:bootstrap-custom

About

This article shows you how to create and install your own custom Bootstrap Stylesheet 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
You can also customize since Bootstrap 5, the style via css variable

Prerequisites

Install Node
Insatll Git

Steps

Get a version

Get Bootstrap

git clone https://github.com/twbs/bootstrap.git

Get the last Combostrap Bootstrap version. Example for Bootstrap version 4.5.0

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 Bootstrap Custom-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 and its map file to the bootstrap folder
define it
and change_the_bootstrapstylesheet_configuration

Copy the custom style sheet

The bootstrap folders are organised by bootstrap versions

dokuwiki/lib/combo/resources/library/bootstrap/${version}

Example:

dokuwiki/lib/combo/resources/library/bootstrap/4.5.0 for the version 4.5.0
dokuwiki/lib/combo/resources/library/bootstrap/4.4.1 for the version 4.4.1

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

Define the custom stylesheet

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

Create the file bootstrapLocalCss.json in the bootstrap folder. 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 been possible to modify the file bootstrapCustomCss.json but as this file is overwritten for each upgrade, you would have lost your custom configuration