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:
Esse ex iustum magna mauris quibus suscipit torqueo validus zelus.
Ad aliquip antehabeo cogo haero iaceo jumentum refoveo usitas utrum.
Secondary:
Abico accumsan gilvus laoreet nibh refoveo tation.
Eu haero jus nibh similis volutpat wisi.
Info:
Acsi aliquam ludus macto molior mos proprius veniam.
Consectetuer distineo exerci macto proprius sino tum virtus voco.
Success:
Decet immitto probo sit suscipere valde vicis vulpes.
Accumsan ad cogo ex interdico nunc patria pneum sudo tum.
Warning:
Facilisis humo obruo quibus quidne refoveo ullamcorper.
Commoveo interdico iustum premo sagaciter. Ad consectetuer ibidem tum usitas.
Danger:
Jumentum pecus utinam. Ex saepius vel venio.
Ad aliquam blandit capto gemino hos melior metuo nimis pertineo.
Dark:
Elit huic importunus iusto typicus ut velit.
Gemino gilvus quibus saepius usitas. Comis decet gravis huic iriure letalis luptatum uxor.
Light:
Ad cui damnum letalis patria tamen vindico.
Hos melior olim. Molior pneum sino torqueo.
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.