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
- <divclass="progress">
- <divclass="bar"style="width:difine%;"></div>
- </div>
- <divclass="progress progress-striped">
- <divclass="bar"style="width:60%;"></div>
- </div>
- <divclass="progress progress-striped active">
- <divclass="bar"style="width:60%;"></div>
- </div>
- <divclass="progress">
- <divclass="bar bar-success"style="width:35%;"></div>
- <divclass="bar bar-warning"style="width:20%;"></div>
- <divclass="bar bar-danger"style="width:10%;"></div>
- </div>
Pop-up dialogs
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
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