General Components general ui components

Alerts

Default Alerts

Success! The page has been added.
Info! You have 198 unread messages.
Warning! Your monthly traffic is reaching limit.
Error! The daily cronjob has failed.

Dismissable Alerts

Warning! Something went wrong. Please check.

Links in alerts

WOW! Well done and everything looks OK. Please check this one as well
Notes

Success! Some Header Goes Here

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

Info! Some Header Goes Here

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

Danger! Some Header Goes Here

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

Warning! Some Header Goes Here

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

Inline Notifications

Error!

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

Do this Cancel

Success!

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

Do this Cancel

Info!

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

Do this Cancel

Warning!

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

Do this Cancel

Pulsate

Pulsate any page elements.

Repeating Pulsate
Repeating Pulsate
Pulsate me
Pulsate me
NOTE! Pulsate is supported in Latest Firefox, Chrome, Opera, Safari and Internet Explorer 9 and Internet Explorer 10 only.
Modal Dialogs

Click on below buttons to check it out.

Modal Dialog Alert Confirm
Tooltips

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. twitter handle freegan cred raw denim single-origin coffee viral.

Tooltips In Slim Scroll

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. twitter handle freegan cred raw denim single-origin coffee viral.

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. twitter handle freegan cred raw denim single-origin coffee viral.

Popovers

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel trigger me on hover terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa.

Popovers In Slim Scroll

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel trigger me on hover terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa.

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel trigger me on hover terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa.

List Groups

Basic

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

Custom Colors(refer to ui_colors.html for more colors)

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

Badges

  • Cras justo odio 3
  • Dapibus ac facilisis in 11
  • Morbi leo risus new
  • Porta ac consectetur ac 4
  • Vestibulum at eros 3

Contextual States

  • Default
  • Success
  • Info 3
  • Warning 3
  • Danger

Linked Contextual Items

Custom Content

Panels

Basic Panels

Panel heading without title
Panel content

Panel title

Panel content
Panel content

Contextual Panels

Primary Panel

Panel content

Primary Panel

Panel content

Success Panel

Panel content

Info Panel

Panel content

Warning Panel

Panel content

Danger Panel

Panel content

With Tables

Panel Title

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.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

With List Groups

Panel Title

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 3
  • Dapibus ac facilisis in 11
  • Morbi leo risus new
  • Porta ac consectetur ac 4
  • Vestibulum at eros 3
  • Vestibulum at eros
Progress Bars

Cross-browser compatibility

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

Basic

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

Striped

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Animated

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Stacked

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Labels & Badges

Labels & Badges Styles

Class Labels Badges Roundless Badges
Default Default 5 3
Primary Primary 4 Hot
Info Info 6 New
Success Success 1 2
Danger Danger 3 5
Warning Warning 12 3

Labels In Headings

Example heading default

Example heading success

Example heading danger

Example heading info

Example heading warning

Example heading primary
Pager With Aligned Links

Default

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

Optional Disabled State

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

With Styled Buttons & Icons

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
Dynamic Pagination(jQuery Bootpag)

Basic Pagination

Page 1 content here


Advance Pagination

Page 1 content here

Wells

I am a large well

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

I am a default well

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

I am a small well

Tight pants next level keffiyeh trigger me on click haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.

Media Objects

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left or right aligned image alongside textual content.

  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Thumbnails

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Default

Custom Content

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button