Example page header Subtext for header


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.


Best check yo self, you're not looking too good...

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

Initail Collaps bar
Notifications (Gritter)

Click on below buttons to check it out.

Regular Sticky Imageless Light Max of 3 Remove all
Modal Dialogs
Dialog Confirm Alert !


Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

Default example

Aligned links

Optional disabled state

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

Labels & badge

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

Default Primary Success Info Warning Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

5 10 15 20 25 30 35

Basic Progress Bars
60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

Default progress bar code example.

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% Complete</span>

With label

Remove the .sr-only class from within the progress bar to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.


Stacked Progress Bars

Place multiple bars into the same .progress to stack them.

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Striped Progress Bars
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Animated Progress Bars

Add .active to .progress-striped to animate the stripes right to left. Not available in IE9 and below.

45% Complete
2014 © AdminEx by ThemeBucket