Elements:Colours Utils
Useful colour classes for making text and blocks stand out or fade in.
Extened colour pallette: Within the
/assets/scss/custom/_custom-variables.scss
file set the variable
$enable-theme-colors-extended: true;
to enable the extended colour pallette which adds the following colours: green, red, blue, purple, pink, orange, brown, slate, olive, teal, charcoal.
These additional colours will then be available in the following components:
text and background colours, borders,
badges and buttons.
To remove any unwanted colours you can remove them from the
$theme-colors
map within your
/assets/scss/custom/_custom-maps.scss
file:
$theme-colors: map-remove($theme-colors, "teal", "orange");
Text and background colours combined
.text-bg-*
Bootstrap automatically defines the text contract colour (light or dark) based on the background colour.
Text Colours
Light text has background colour so it can be seen.
Background Colours
There are also a number of background colour classes which can be combined with the text colour classes above to provide contract.
Text/Background Hover/Focus Colours
Have better control over element hover/focus backgrounds and text, these classes can be combined together and also support Background & Text Colour Opacity utils (below).
.bg-hover-COLOUR
requires SASS variable
$enable-hover-colours: true;
.bg-focus-COLOUR
requires SASS variable
$enable-focus-colours: true;
.text-hover-COLOUR
requires SASS variable
$enable-hover-colours: true;
.bg-focus-COLOUR
requires SASS variable
$enable-focus-colours: true;
Only works on focusable elements like links and form fields.
Combined Examples
Combing all these classes.
Background Colour Opacity
Control background colour opacity using the
.bg-op-(1-9)
classes for ultimate control over background colours.
.bg-primary
.bg-info
.bg-success
.bg-warning
.bg-danger
.bg-dark
.bg-light
.bg-green
.bg-red
.bg-blue
.bg-purple
.bg-pink
.bg-orange
.bg-brown
.bg-slate
.bg-olive
.bg-teal
.bg-charcoal
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-gray-700
.bg-gray-800
Border Colours
There are also a number of border colour classes which an elements bordered colour to be set.
You can set thicker borders using the
border-w-(2-5)
classes.
You can also remove borders using the
border-0
and
border-SIDE-0
classes.
Border Colour Opacity
Control border colour opacity using the
.border-op-(1-9)
classes for ultimate control over border colours.