Color system
Overview
Custom color system - a set of CSS classes and SCSS variables
that allow to change colors on-the-fly directly in markup by
changing class name or use color tints and shades in SCSS
code. Color system includes 11 color palettes: 6 contextual
(primary, secondary, danger, success, warning and info) and
5 secondary colors. The system is fully controlled by
variable maps in _variables-core.scss and is a
part of Bootstrap core since version 3.0.
The color system is supported by almost all layout elements
and components: sidebar, navbar, content panels, links,
text, icons, alerts, dropdown menus, form components,
tables, tabs, progress bars, buttons, notifications,
popovers, tooltips, badges etc. The system consists of 11
color palettes, each palette includes 1 main color (e.g.
.bg-danger) in both HEX and RGB formats, color
classes also support alpha transparency that can be set via
.bg-opacity-[0|10|20|25|50|75] classes. List fo
colors can be easily extended by adding or removing
properties in $theme-colors and
$dark-theme-colors SASS maps in
_variables-core.scss file.
Available color palettes:
- Primary palette
- Secondary palette
- Danger palette
- Success palette
- Warning palette
- Info palette
- Pink palette
- Purple palette
- Indigo palette
- Teal palette
- Yellow palette
When you add a new color to $theme-colors or
$dark-theme-colors SASS maps in
_variables-core.scss file, template
configuration automatically creates a CSS variable for this
color in HEX and RGB format and adds it to the root level.
// SCSS input
$theme-colors: (
"indigo-100": $indigo-100,
...
);
// CSS output
:root,
[data-color-theme=light] {
--indigo-100: #eff0f9;
--indigo-100-rgb: 239,240,249;
...
}
Basic usage
Usage is very simple, all you need to do is to
add one of the color CSS classes to the element. Limitless
template includes a bunch of pages with demonstration of how
color palette is used - in components, elements and layout
parts. Depending on what part of element you want to change,
available classes are (primary palette is an
example):
| Class | Description |
|---|---|
| Background | |
.bg-primary |
Background color. Can be added to dropdown
menus, sidebar, navbar, alerts, inputs,
cards, selects etc. In certain cases
requires .text-white class to
inverse text color |
| Borders | |
.border-primary |
Border color. Any element that contains
border. Can be used in combination with
.border class that adds a
border to an element |
border-top-primary |
Top border only. Any element that contains
all sides border or top
border only. Can be used in combination with
.border-top class that adds a
top border to an element |
border-bottom-primary |
Bottom border only. Any element that
contains all sides border or
bottom border only. Can be
used in combination with
.border-bottom class that adds
a bottom border to an element |
border-start-primary |
Left border only. Any element that contains
all sides border or left
border only. Can be used in combination with
.border-start class that adds a
left border to an element |
border-end-primary |
Right border only. Any element that contains
all sides border or right
border only. Can be used in combination with
.border-end class that adds a
right border to an element |
| Text | |
.text-primary |
Text color. Can be used in text, icons and links |
.link-primary |
Text link color. Used in links only |
| Buttons | |
.btn-primary |
Solid button color |
.btn-outline-primary |
Outline button color |
.btn-flat-primary |
Flat button color |
| Alerts | |
.alert-primary |
Alert color. Can be used in all alert style variations |
| Table | |
.table-primary |
Table cell/row color |
| List group | |
.list-group-item-primary |
Text and links in link group |
Colors
Color system uses custom color palette generated from 1
primary color (e.g. $blue-500) using SASS color
functions: tint-color() for lighter color and
shade-color() for lighter colors. Lightness and
darkness step varies from 20% to 30%. Colored blocks below
demonstrate all color codes and variables used in the
template: