Add any of the below mentioned modifier classes to change the appearance of a badge.
Use the badge-soft-*
class for badge lighten.
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.
The best part is you can do this with any button variant, too:
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.
Trigger dropdown menus above elements by adding .dropup
, .dropright
and .dropleft
to the parent element.
Add .dropdown-menu-right
to a .dropdown-menu
to right
align the dropdown menu.
Pagination links indicate a series of related content exists across multiple pages.
Pagination links are customizable for
different circumstances. Use .disabled
for links that appear
un-clickable and .active
to
indicate the current page.
Fancy larger or smaller pagination? Add .pagination-lg
or .pagination-sm
for additional
sizes.
Change the alignment of pagination components with flexbox utilities.
Add small overlay content, like those found in iOS, to any element for housing secondary information.
Hover over the links below to see tooltips:
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Use the border spinners for a lightweight loading indicator.
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!