The Alerts Component in Bootstrap 4

Just like Bootstrap 3 alerts, the version 4 of Bootstrap also has classes specific to creating contextual alerts in your web project.

The alerts are triggered by various user actions e.g., a user entered wrong account information for login. Similarly, displaying an alert for the record deletion in red. Before deleting that record, displaying a warning alert in orange color.

The account creation alert can be displayed as green. Unlike the typical JavaScript or jQuery based alerts the Bootstrap alerts (3 or 4) are non-modal. That means a user may interact with other sections of the web page as the alert is displayed.

A user may close the alert by using a cross button or you may write a script for hiding the alert automatically in JavaScript.

A simple alert example in Bootstrap

If you are familiar with the Bootstrap 3 alerts then no learning curve is required in Bootstrap 4. Use the same classes i.e. .alert and alert-[contextual class] for creating an alert.

The only difference is that a couple of classes are added in the latest release. See the example below where alerts are created by using all eight contextual classes:

See online demo and code

The markup for alerts:

Making dismissible alerts example

Generally, you will require closing the alerts by user action like using the ‘X’ symbol or automatically closing the alert after the certain interval.

For allowing visitors closing the alerts by ‘X’ symbol, you may include the alert plug-in or if Bootstrap.js file is included already, this will work.

After that, add the .alert-dismissible class in the container with alert class. You also require including a button element with ‘close’ class and data-dismiss=“alert” attribute. Have a look at an example below:

See online demo and code

The markup for this demo

You can also see, the first alert uses the fade and show classes. This class adds the fading effect as you press the close button. On the other hand, the second alert is closed in a jerk.

The example of closing an alert automatically

The following example shows closing an alert automatically by using jQuery code. The three seconds interval is given for closing all eight alerts that we used in the first example.

A few alerts are given fade and show classes, so you may see the difference of closing in a jerk and with fading effect.

See online demo and code

The markup:

The script for this example:

Using link classes in alerts example

There are chances that the alerts created with Bootstrap 4 contain links to other resources. Bootstrap has taken care about those links by providing contextual link classes with respect to the alert context classes.

You simply need using one class in the links within alert i.e. .alert-link and it will make the link similar color (a little darker) as the color of contextual alert.

See this example where I used alert-link class in various alerts:

See online demo and code

The markup of one alert in the demo:

See the complete code on the example page.

Another style of alert with more content

The alerts Bootstrap 4 may contain more content with different elements. You may include headings, dividers, paragraphs etc. as the content in an alert. This is particularly useful where you have long information to display with various distinctive and detailed parts.

See the example below where I used heading, paragraph, span tags, separators and font-awesome icons in an alert with different built-in text classes for coloring the text.

See online demo and code

The code:

Get the complete code on the demo page.