Bootstrap

Home / Bootstrap

The Bootstrap folder contains the Bootstrap version used to compile the SCSS file app.bootstrap.guideline.scss into the homonymous CSS stylesheet app.bootstrap.guideline.css that can be imported into any derived application.

1. Update Bootstrap version

For using a later version of Bootstrap, create a new folder with the relative version number and visit Get Bootstrap.

e.g. \bootstrap\x.y.z\

2. Update Bootstrap CSS styling definition

The follwoing extensions are needed to compile the SCSS into CSS in Visual Studio Code.

• Live Sass Compiler Visual Studio Code extension.
• Live Sass Compiler Install Live Sass Compiler Install

The default Bootstrap CSS styling definitions can be change by updating the file \bootstrap\4.1.3\app.bootstrap.guideline.scss.

The definitions are grouped into 2 categories, Standard and Functional color pallet.

• Standard color palette - keep unchanged.

   $theme-colors : (
    "blue" : #008FAA,
    "indigo" : #6610f2,
    "purple": #1D345C,
    "pink": #B51E83,
    "red": #DC4128,
    "orange": #fd7e14,
    "yellow": #FAA21B,
    "green": #006168,
    "teal": #45C1C0,
    "cyan": #17a2b8,
    "white": #fff,
    "gray": #6c757d,
    "gray-dark": #343a40,
 );
...
}

• Functional color palette - Change for customisation

N.B. As better practice, it is recommended to customize and reference only the Functional color pallet.

   $theme-colors : (
    "primary": #579599,
    "secondary": #45C1C0,
    "tertiary": #35456B,
    "navbar": #006168,
    "success": #28a745,
    "info": #17a2b8,
    "warning": #FAA21B,
    "danger": #DC4128,
    "light": #f8f9fa,
    "dark": #343a40,
    "neutral": #CDD3D9,
);
...
}

• Font style definition

The following font-family and the Roboto font is used, but they can be customized.

...
 @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,300italic,400italic,700,700italic);/*main font used throughout website*/

  $font-family-sans-serif:      'Roboto Sans', sans-serif;
  $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
  $font-family-base:            $font-family-sans-serif !default;
  $headings-font-family:        'Roboto Slab', sans-serif;
...