Elements:Alerts
Alerts are useful for displaying 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");
Styles
Content
Alerts support bolder links and headers using the
.alert-link
and
.alert-heading
classes. You can also use
hr
tags within them and other spacer utils.
Primary:
Abico lenis mauris nostrud nutus persto si singularis.
Abbas autem enim in jumentum letalis macto veniam vero voco.
Secondary:
Abdo camur eu ex huic quidem rusticus sudo vereor.
Caecus nunc ulciscor ut venio. Immitto plaga secundum.
Info:
Abbas commodo luctus. Huic macto premo turpis.
Blandit cui ex gilvus lucidus nobis persto sagaciter.
Success:
Abluo dolor dolore in iriure pneum probo refero secundum usitas.
Accumsan aliquam jus nunc. Decet elit ex jumentum magna nobis os praemitto tamen.
Warning:
Aliquip causa iustum lobortis sagaciter valde vereor.
Duis ex uxor volutpat. Abigo exputo facilisi os quidne refero.
Danger:
Aliquip autem nutus plaga. Aliquam iaceo ibidem laoreet nobis quia roto si tego ullamcorper.
Abico cui eligo interdico. Acsi ad augue commodo feugiat lenis oppeto qui ulciscor.
Dark:
Eligo ideo luctus nunc vel. Abigo causa duis luptatum refero secundum tum ut.
Haero in probo qui ratis wisi.
Light:
Exputo iriure pagus pertineo ut. Ibidem luptatum magna.
Bene caecus virtus. Antehabeo comis facilisis genitus illum ludus magna venio vulpes.
Positioning, widths & margins
You can make use of the positioning, width and spacing utilities to control the alerts. You can also use
Dismissing
To allow users to dismiss an alert via Javascript add a
.alert-dismissible
class to the alert and include a "close" button with the attribute
data-bs-dismiss="alert"
within the alert.