Using Bootstrap: Part 2: Alerts

Learning Bootstrap

Using Bootstrap

Bootstrap is a free and open-source front-end framework for designing HTML- and CSS-based applications.


Alerts

An alert is one of many components Bootstrap supplies developers that act as a quick way to display information, warnings, or other details to a user. As a component, they have a role aspect that marks them as more than simply presentation or layout.

A quick, visual way to think of alerts in Bootstrap is a combination of borders, text-, and background-color classes. Like borders, the first class applied is alert and then there is a class using of the build-in color classes with the prefix alert- followed by its name.

Alert Content

While the use of the class alert and then a prefixed color class changes elements into the Alert component, they can also use additional classes to build complex content areas.

Heading

The alert-heading class can be used to create a heading within an alert.

Content

Any additional elements included within an element with the class alert show up within the Alert itself and can be used to include more detail.

Interacting with Alerts

In Bootstrap, components are content areas that may have some form of interactivity. For Alerts, they can optionally be dismissed.

To make an Alert have an interactive aspect, an additional class alert-dismissible must be added to the element. Elements with the
alert-dismissible class should also use the class show to signal that it has not already been dismissed (hidden).

In order to dismiss (hide) an Alert, it must contain an element with the attribute data-dismiss with its value set to alert. It is recommended to use a link, button, or other interactive element for this.

Play with the example on Repl.it!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.