Components Default Bootstrap Components

Font Icons

Flaticon Material Design Pack (423 icons)

View More

FontAwesome Icons (479 icons)

View More

Button Groups

Basic Example


Nesting

Vertical Variationt

Sizes









Button Dropdowns

Single Button Dropdowns

Split Button Dropdowns

Sizes

Dropup

Input Groups

Basic Example

Sizes

Checkboxes and radios addons

Button addons

Buttons with dropdowns

Segmented buttons

Navs

Tabs Horizontal

Tabs Vertical

Tabs with Dropdowns

Pills

Pills Stacked

Pills with Dropdowns

Navbar

Default Navbar

Condensed Navbar

Breadcrumbs

  1. Home
  1. Home
  2. Pages
  1. Home
  2. Pages
  3. Blog

Pagination

Pager

Labels

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Color Variations

Default Primary Success Info Warning Danger

Badges

Inbox42

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Thumbnails

Basic Example

Thumbnail
Thumbnail
Thumbnail
Thumbnail

With Custom Content

Thumbnail

Thumbnail label

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco.

Button
Thumbnail

Thumbnail label

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco.

Button
Thumbnail

Thumbnail label

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco.

Button

Progress Bars

Standard Version

50%
40%
20%
60%
80%

Stacked

35% Complete (success)
20% Complete (warning)
25% Complete (danger)

Striped Version

Animated

50% Complete

Media Objects

Thumbnail

Media heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In tenetur blanditiis minus cum minima harum inventore quas iure aliquid ex ut, facilis eaque earum. Rerum eos, laudantium veniam vero esse. Voluptatum blanditiis illum neque quo architecto reprehenderit inventore.

Thumbnail

Media heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In tenetur blanditiis minus cum minima harum inventore quas iure aliquid ex ut, facilis eaque earum. Rerum eos, laudantium veniam vero esse. Voluptatum blanditiis illum neque quo architecto reprehenderit inventore.

Thumbnail

Media heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In tenetur blanditiis minus cum minima harum inventore quas iure aliquid ex ut, facilis eaque earum. Rerum eos, laudantium veniam vero esse. Voluptatum blanditiis illum neque quo architecto reprehenderit inventore.

List Groups

Basic Example

  • Lorem ipsum dolor
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

Example with Badges

  • 15 Lorem ipsum dolor
  • 15 Cras justo odio
  • 3 Dapibus ac facilisis in
  • 8 Morbi leo risus

Linked Items

15 Lorem ipsum dolor 15 Cras justo odio 3 Dapibus ac facilisis in 8 Morbi leo risus

Contextual Colors

  • Lorem ipsum dolor sit amet
  • Dapibus ac facilisis in
  • Sed ut perspiciatis unde omnis
  • Porta ac consectetur ac
  • Vestibulum at eros

Contextual Colors Linked Items

Lorem ipsum dolor sit amet Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

Custom Content

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus.

Panels

Panels Options

Panel Primary

Panel content

Panel Primary

Panel content

Panel Success

Panel content

Panel Info

Panel content

Panel Warning

Panel content

Panel Danger

Panel content

Panel with List Group

Panel heading
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Responsive Embed

Wells

Look, I'm in a small well!
Look, I'm in a well!
Look, I'm in a large well!

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×