Getting started!

Notifications

Alerts

Alerts with the link

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Dismissing

It’s possible to dismiss any alert inline. Here’s how:

  • Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
  • Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.
  • On the dismiss button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.
  • To animate alerts when dismissing them, be sure to add the .fade and .show classes.

Raised alerts

Alerts with icon

Alerts with avatar

Alerts with buttons

Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Badges

Badges can be used as part of links or buttons to provide a counter.

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Secondary Success Danger Warning Info Light Dark

Pill badges

Use the badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).

Primary Secondary Success Danger Warning Info Light Dark

Links

Using the badge classes with the a element quickly provide actionable badges with hover and focus states.

Primary Secondary Success Danger Warning Info Light Dark