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

Undraw Animating

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

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.

Documentation




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Related HowTo's
Bootstrapversionstylesheet
How can I choose the Bootstrap StyleSheet?

ComboStrap comes with: the standard Bootstrap stylesheet and the bootswatch themes You can choose your stylesheet via the Bootstrap Stylesheet Version configuration....


Recommended Pages
Bootstrapversionstylesheet
ComboStrap - Bootstrap

bootstrap is the default UI system used by ComboStrap. We use by default, the latest Bootstrap version supported. You can change the version and stylesheet with the bootstrap version stylesheet version...
Default Component Stylesheet File Explorer
Component Stylesheet

This functionality gives the possibility for Web Designers to customize the style of Combostrap components. If a stylesheet with the name of a component is found in the components/css directory of a...
Undraw Dark Mode 2xam
Theme

A theme designs your entire website app. A theme is composed of: templates. Each template applies to one page and designs a layout. component styling You can apply: a bootstrap stylesheet or...
Undraw My Documents
What are breakpoints ?

A breakpoint allows to created conditional styling / design



Task Runner