Links are customizable and work in a number of circumstances with the right class. .disabled
for unclickable links and .active
for current page.
Add either of two optional classes to change the alignment of pagination links: .pagination-centered
and .pagination-right
.
<div class="pagination"> <ul> <li><a href="#">Prev</a></li> <li class="active"> <a href="#">1</a> </li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">Next</a></li> </ul> </div>
The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.
Pager links also use the general .disabled
class from the pagination.
<ul class="pager"> <li> <a href="#">Previous</a> </li> <li> <a href="#">Next</a> </li> </ul>
Labels | Markup |
---|---|
Default |
<span class="label">Default</span>
|
Success |
<span class="label label-success">Success</span>
|
Warning |
<span class="label label-warning">Warning</span>
|
Important |
<span class="label label-important">Important</span>
|
Info |
<span class="label label-info">Info</span>
|
Inverse |
<span class="label label-inverse">Inverse</span>
|
Name | Example | Markup |
---|---|---|
Default | 1 |
<span class="badge">1</span>
|
Success | 2 |
<span class="badge badge-success">2</span>
|
Warning | 4 |
<span class="badge badge-warning">4</span>
|
Error | 6 |
<span class="badge badge-error">6</span>
|
Info | 8 |
<span class="badge badge-info">8</span>
|
Inverse | 10 |
<span class="badge badge-inverse">10</span>
|
<div class="alert"> ... </div>
<div class="alert alert-error"> ... </div>
<div class="alert alert-success"> ... </div>
<div class="alert alert-info"> ... </div>
<div class="progress"> <div class="bar" style="width: 60%;"></div> </div>
<div class="progress progress-striped"> <div class="bar" style="width: 20%;"></div> </div>
<div class="progress progress-striped active"> <div class="bar" style="width: 40%;"></div> </div>
Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
If you use the .active
class, your .progress-striped
progress bars will animate the stripes left to right.
Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.
Get a little fancy with your tables by adding zebra-striping—just add the .table-striped
class.
<table class="table table-striped"> </table>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |