Bootstrap UI

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message

Badges

Default

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Primary Secondary Success Danger Warning Info
Pill Badges

Use the .badge-pill modifier class to make badges more rounded.

Primary Secondary Success Danger Warning Info
Badges Lighten

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

Primary Secondary Success Danger Warning Info

Cards

Card image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content. With supporting text below as a natural lead-in to additional content.

Button
Card image cap
Card title

Some quick example text to build on the card title.

  • Dapibus ac facilisis in
...
Card title

This is a wider card with supporting text lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text lead-in to additional content.

Last updated 3 mins ago

...
Dropdown - More Examples

You can put a form or simple text within a dropdown menu or set the different position

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.

Rounded Pagination

Add .pagination .flat-rounded-paginationd for rounded pagination.

Sizing

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

Alignment

Change the alignment of pagination components with flexbox utilities.

Nav Tabs

Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Nav Pills

Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Modals

A rendered modal with header, body, and set of actions in the footer.

Examples
Modal sizes
Other exmaples
Progressbars

Simple examples of progressbar

25%
Striped Progressbars

Uses a gradient to create a striped effect.

Contextual Progressbars

Progress bars use some of the same button and alert classes for consistent styles.

Progressbars Size

We can set a height value on the .progress. The inner .progress-bar will automatically resize accordingly.

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.

Spinners

Border spinner

Use the border spinners for a lightweight loading indicator.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
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!

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...