General UI
Badges
Add any of the below mentioned modifier classes to change the appearance of a badge.
Badges lighten
Use the badge-soft-* class for badge lighten.
Pill badges
Use the .rounded-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.
Dropdowns
The best part is you can do this with any button variant, too:
Split button dropdowns
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.
Dropdown Directions
Trigger dropdown menus above elements by adding .dropup, .dropright and .dropleft to the parent element.
Menu alignment
Add .dropdown-menu-right
to a .dropdown-menu to right
align the dropdown menu.
Pagination
Default Example
Pagination links indicate a series of related content exists across multiple pages.
Disabled and active states
Pagination links are customizable for
different circumstances. Use .disabled for links that appear
un-clickable and .active to
indicate the current page.
Sizing
Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional
sizes.
Alignment
Change the alignment of pagination components with flexbox utilities.
Popovers
Add small overlay content, like those found in iOS, to any element for housing secondary information.
Tooltips
Hover over the links below to see tooltips:
Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Border spinner
Use the border spinners for a lightweight loading indicator.
Growing spinner
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
