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
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
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
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 stylesheet configuration.