Bootstrap-Elements

Popovers

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

Tooltips

Four options are available: top, right, bottom, and left aligned.

Labels

Add any of the default mentioned modifier classes to change the appearance of a label.

Default Primary Success Info Warning Danger Purple Inverse Pink

Badge

Four options are available: top, right, bottom, and left aligned.

15 0 21 3 35 32 51 77 9

Standard Alert

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

Big one!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Dismissable Alert

Build on any alert by adding an optional .alert-dismissible and close button.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.

Big one!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Pagination

Provide pagination links for your site or app with the multi-page pagination component.

Default Pagination

Simple pagination inspired by Rdio, great for apps and search results.

Split Pagination

Links are split to each other by adding a class of .pagination-split

Sizing

Add .pagination-lg or .pagination-sm for additional sizes.

Pagers

Quick previous and next links for simple pagination implementations with light markup and styles.

Default

By default, the pager centers links.

Aligned Links

Alternatively, you can align each link to the sides:

Optional Disabled State

Pager links also use the general .disabled utility class from the pagination.

List Groups(Simple List Group)

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 9 Morbi leo risus
  • 7 Morbi leo risus
  • 1 Morbi leo risus

List Group with Links

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

2015 © Ubold.