Interface elements
Labels and badges
| Labels | Markup |
|---|---|
| Default | <span class="label"> |
| Success | <span class="label label-success"> |
| Warning | <span class="label label-warning"> |
| Important | <span class="label label-important"> |
| Info | <span class="label label-info"> |
| Inverse | <span class="label label-inverse"> |
| Name | Example | Markup |
|---|---|---|
| Default | 1 | <span class="badge"> |
| Success | 2 | <span class="badge badge-success"> |
| Warning | 4 | <span class="badge badge-warning"> |
| Important | 6 | <span class="badge badge-important"> |
| Info | 8 | <span class="badge badge-info"> |
| Inverse | 10 | <span class="badge badge-inverse"> |
Different notifications
- Standard notification
- Sticky notification
- Notification with image
Icon With box
- icon-book
- icon-cabinet
- icon-calendar
- icon-client
- icon-database
- icon-download
- icon-graph
- icon-home
- icon-lock
- icon-mail
- icon-Dashboard
- icon-facetime-video
- icon-external-link
- icon-folder-open
<ul class="quick-actions">
<li a href="#"> <i class="icon-book"></i> icon-book </a> </li>
</ul>
Different Bars
- <div class="progress">
- <div class="bar" style="width: difine%;"></div>
- </div>
- <div class="progress progress-striped">
- <div class="bar" style="width: 60%;"></div>
- </div>
- <div class="progress progress-striped active">
- <div class="bar" style="width: 60%;"></div>
- </div>
- <div class="progress">
- <div class="bar bar-success" style="width: 35%;"></div>
- <div class="bar bar-warning" style="width: 20%;"></div>
- <div class="bar bar-danger" style="width: 10%;"></div>
- </div>
Pop-up dialogs
View Popup Alert image Popup
Pop up Header
Here is the text coming you can put also image if you want�?/p>
Tooltip directions
Four directions of the tooltips, just add a class: 'tip-top', 'tip-bottom', 'tip-left' or 'tip-right' without quotes to the element you want to have tooltip.
Pagination
Typography
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Popover Option
Notifications
×
Warning!
You're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. ×
Success!
Tou're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. ×
Info!
Tou're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. ×
Error!
You're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Warning! Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Success! Libero, a pharetra augue. Praesent commodo
Info! you're not looking too good.
Error! Nulla vitae elit libero, a pharetra augue. Praesent commodo