Example page header Subtext for header

Alerts

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.

Success!

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>

AdminEx is an Awesome Dashboard

Awesome admin template

Based on Latest Bootstrap 3.1.0

Well Organized

Awesome admin template

Huge UI Elements

Well Documentation

Awesome admin template

Very Easy to Use
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 !
Pagination

Sizing

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>
    </div>
</div>

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.

60%

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