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

• 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

## 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",
}