General UI

  2. UI Elements
  3. General UI
ActionAnother actionSomething else here
Separated link

badges

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

PrimarySuccessInfoWarningDangerDark
badges lighten

Use the badge-soft-* class for badge lighten.

PrimarySuccessInfoWarningDangerDark

Pill badges

Use the .badge-pillmodifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

PrimarySuccessInfoWarningDangerDark

Dropdowns

The best part is you can do this with any button variant, too:

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

Split button dropdowns

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-splitfor proper spacing around the dropdown caret.

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

Dropdown Directions

Trigger dropdown menus above elements by adding .dropup, .droprightand .dropleftto the parent element.

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

Menu alignment

Add .dropdown-menu-right to a .dropdown-menuto right align the dropdown menu.

ActionAnother actionSomething else here
Separated link

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 .disabledfor links that appear un-clickable and .activeto indicate the current page.

Sizing

Fancy larger or smaller pagination? Add .pagination-lgor .pagination-smfor 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!