Modals
Modals are a flexible way of displaying custom dialog prompts using JavaScript.
Size
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Colors
Add any of the modifier classes (e.g. .badge-light, .badge-primary) to change the appearance of a badge.
Pill
Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.
Colors
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four required contextual classes (e.g., .alert-success).
Content
Alerts can also contain additional HTML elements like headings and paragraphs.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Tooltips
Hover over the buttons below to see their tooltips.
Popovers
Add small overlay content, like those found in iOS, to any element for housing secondary information.
Click the buttons to trigger the popover
AdminDash
