Elements:Badges
tags are useful for displaying contextual messages to users on screen.
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");
tags in headers
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Styles
tags also come in the following styles using the
.bg-COLOUR
helpers..
Pill style
Add the classes
.badge & .rounded-pill
to tags to make them display like a "pill".
Positioned
Use utilities to modify a
.badge
and position it in the corner of a link or button.
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> 99+ <span class="visually-hidden">unread messages</span> </span>
</button><button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"> <span class="visually-hidden">New alerts</span> </span>
</button>