Bootstrap-Elements

  1. Ubold
  2. UI Kit
  3. 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.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

List Group with Description

Add nearly any HTML within, even for linked list groups like the one below.

Domestic confined any but son

Consider speaking me prospect whatever if. Ten nearer rather hunted six parish indeed number. Allowance repulsive sex may contained can set suspected abilities cordially. Do part am he high rest that. So fruit to ready it being views match.

Why painful the sixteen how minuter

Started his hearted any civilly. So me by marianne admitted speaking. Men bred fine call ask. Cease one miles truth day above seven. Suspicion sportsmen provision suffering mrs saw engrossed something. Snug soon he on plan in be dine some.

Barton waited twenty always repair

Talking chamber as shewing an it minutes. Trees fully of blind do. Exquisite favourite at do extensive listening. Improve up musical welcome he. Gay attended vicinity prepared now diverted. Esteems it ye sending reached as. Longer lively her design settle tastes advice mrs off who.