- «
- 1
- 2
- 3
- 4
- 5
- »

> <ul class="pagination">
> <li><a href="#">«</a></li>
> <li><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="#">5</a></li>
> <li><a href="#">»</a></li>
> </ul>

- «
- 1 (current)
- 2
- 3
- 4
- 5
- »

> <ul class="pagination">
> <li class="disabled"><a href="#">«</a></li>
> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
> <li><a href="#">2</a></li>
> <li><a href="#">3</a></li>
> <li><a href="#">4</a></li>
> <li><a href="#">5</a></li>
> <li><a href="#">»</a></li>
> </ul>

- Previous
- Next

> <ul class="pager">
> <li><a href="#">Previous</a></li>
> <li><a href="#">Next</a></li>
> </ul>

- ← Older
- Newer →

> <ul class="pager">
> <li class="previous"><a href="#">← Older</a></li>
> <li class="next"><a href="#">Newer →</a></li>
> </ul>

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-info">Info</span>
> <span class="label label-warning">Warning</span>
> <span class="label label-danger">Danger</span>

> <div class="btn-group">
> <button type="button" class="btn btn-default">Left</button>
> <button type="button" class="btn btn-default">Middle</button>
> <button type="button" class="btn btn-default">Right</button>
> </div>

> <div class="btn-toolbar" role="toolbar">
> <div class="btn-group">1</div>
> <div class="btn-group">2</div>
> <div class="btn-group">3</div>
> <div class="btn-group">4</div>
> <div class="btn-group">...</div>
> </div>

> <div>
> <div class="btn-group">
> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
> <ul class="dropdown-menu" role="menu">
> <li><a href="#">Action</a></li>
> <li><a href="#">Another action</a></li>
> <li><a href="#">Something else here</a></li>
> <li class="divider"></li>
> <li><a href="#">Separated link</a></li>
> </ul>
> </div><!-- /btn-group -->
> <div class="btn-group">
> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
> <ul class="dropdown-menu" role="menu">
> <li><a href="#">Action</a></li>
> <li><a href="#">Another action</a></li>
> <li><a href="#">Something else here</a></li>
> <li class="divider"></li>
> <li><a href="#">Separated link</a></li>
> </ul>
> </div><!-- /btn-group -->
> <div class="btn-group">
> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
> <ul class="dropdown-menu" role="menu">
> <li><a href="#">Action</a></li>
> <li><a href="#">Another action</a></li>
> <li><a href="#">Something else here</a></li>
> <li class="divider"></li>
> <li><a href="#">Separated link</a></li>
> </ul>
> </div><!-- /btn-group -->
> <div class="btn-group">
> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
> <ul class="dropdown-menu" role="menu">
> <li><a href="#">Action</a></li>
> <li><a href="#">Another action</a></li>
> <li><a href="#">Something else here</a></li>
> <li class="divider"></li>
> <li><a href="#">Separated link</a></li>
> </ul>
> </div><!-- /btn-group -->
> <div class="btn-group">
> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
> <ul class="dropdown-menu" role="menu">
> <li><a href="#">Action</a></li>
> <li><a href="#">Another action</a></li>
> <li><a href="#">Something else here</a></li>
> <li class="divider"></li>
> <li><a href="#">Separated link</a></li>
> </ul>
> </div><!-- /btn-group -->
> <div class="btn-group">
> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
> <ul class="dropdown-menu" role="menu">
> <li><a href="#">Action</a></li>
> <li><a href="#">Another action</a></li>
> <li><a href="#">Something else here</a></li>
> <li class="divider"></li>
> <li><a href="#">Separated link</a></li>
> </ul>
> </div><!-- /btn-group -->
> </div>

> <ul class="nav nav-tabs">
> <li class="active"><a href="#">Home</a></li>
> <li><a href="#">Help</a></li>
> <li class="dropdown">
> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
> Dropdown <span class="caret"></span>
> </a>
> <ul class="dropdown-menu" role="menu">
> <li><a href="#">Action</a></li>
> <li><a href="#">Another action</a></li>
> <li><a href="#">Something else here</a></li>
> <li class="divider"></li>
> <li><a href="#">Separated link</a></li>
> </ul>
> </li>
> </ul>

> <ul class="nav nav-pills">
> <li class="active"><a href="#">Home</a></li>
> <li><a href="#">Help</a></li>
> <li class="dropdown">
> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
> Dropdown <span class="caret"></span>
> </a>
> <ul class="dropdown-menu" role="menu">
> <li><a href="#">Action</a></li>
> <li><a href="#">Another action</a></li>
> <li><a href="#">Something else here</a></li>
> <li class="divider"></li>
> <li><a href="#">Separated link</a></li>
> </ul>
> </li>
> </ul>

> <ul class="nav nav-tabs">
> <li class="active"><a href="#">Home</a></li>
> <li><a href="#">Profile</a></li>
> <li><a href="#">Messages</a></li>
> </ul>

> <ul class="nav nav-tabs">
> <li class="active"><a href="#">Home</a></li>
> <li><a href="#">Profile</a></li>
> <li><a href="#">Messages</a></li>
> </ul>

Warning! Better check yourself, you're not looking too good.

> <div class="alert alert-warning alert-dismissable">
> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
> <strong>Warning!</strong> Better check yourself, you're not looking too good.
> </div>

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

> <div class="progress">
> <div class="progress-bar progress-bar-success" style="width: 35%">
> <span class="sr-only">35% Complete (success)</span></div>
> <div class="progress-bar progress-bar-warning" style="width: 20%">
> <span class="sr-only">20% Complete (warning)</span></div>
> <div class="progress-bar progress-bar-danger" style="width: 10%">
> <span class="sr-only">10% Complete (danger)</span></div>
> </div>

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

> <div class="alert alert-success">Well done! You successfully read this important alert message.</div>
> <div class="alert alert-info">Heads up! This alert needs your attention, but it's not super important.</div>

Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

> <div class="alert alert-warning">Warning! Better check yourself, you're not looking too good.</div>
> <div class="alert alert-danger">Oh snap! Change a few things up and try submitting again.</div>

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

> <div class="progress">
> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
> <span class="sr-only">40% Complete (success)</span>
> </div>
> </div>
> <div class="progress">
> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
> <span class="sr-only">20% Complete</span>
> </div>
> </div>
> <div class="progress">
> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
> <span class="sr-only">60% Complete (warning)</span>
> </div>
> </div>
> <div class="progress">
> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
> <span class="sr-only">80% Complete</span>
> </div>
> </div>

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

> <div class="progress progress-striped">
> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
> <span class="sr-only">40% Complete (success)</span>
> </div>
> </div>
> <div class="progress progress-striped">
> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
> <span class="sr-only">20% Complete</span>
> </div>
> </div>
> <div class="progress progress-striped">
> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
> <span class="sr-only">60% Complete (warning)</span>
> </div>
> </div>
> <div class="progress progress-striped">
> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
> <span class="sr-only">80% Complete (danger)</span>
> </div>
> </div>

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

> <table class="table">
> <thead>
> <tr>
> <th>#</th>
> <th>First Name</th>
> <th>Last Name</th>
> <th>Username</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td>1</td>
> <td>Mark</td>
> <td>Otto</td>
> <td>@mdo</td>
> </tr>
> <tr>
> <td>2</td>
> <td>Jacob</td>
> <td>Thornton</td>
> <td>@fat</td>
> </tr>
> <tr>
> <td>3</td>
> <td>Larry</td>
> <td>the Bird</td>
> <td>@twitter</td>
> </tr>
> </tbody>
> </table>

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

> <table class="table table-striped">
> <thead>
> <tr>
> <th>#</th>
> <th>First Name</th>
> <th>Last Name</th>
> <th>Username</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td>1</td>
> <td>Mark</td>
> <td>Otto</td>
> <td>@mdo</td>
> </tr>
> <tr>
> <td>2</td>
> <td>Jacob</td>
> <td>Thornton</td>
> <td>@fat</td>
> </tr>
> <tr>
> <td>3</td>
> <td>Larry</td>
> <td>the Bird</td>
> <td>@twitter</td>
> </tr>
> </tbody>
> </table>

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

> <table class="table table-bordered">
> <thead>
> <tr>
> <th>#</th>
> <th>First Name</th>
> <th>Last Name</th>
> <th>Username</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td>1</td>
> <td>Mark</td>
> <td>Otto</td>
> <td>@mdo</td>
> </tr>
> <tr>
> <td>2</td>
> <td>Jacob</td>
> <td>Thornton</td>
> <td>@fat</td>
> </tr>
> <tr>
> <td>3</td>
> <td>Larry</td>
> <td>the Bird</td>
> <td>@twitter</td>
> </tr>
> </tbody>
> </table>

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

> <table class="table table-hover">
> <thead>
> <tr>
> <th>#</th>
> <th>First Name</th>
> <th>Last Name</th>
> <th>Username</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td>1</td>
> <td>Mark</td>
> <td>Otto</td>
> <td>@mdo</td>
> </tr>
> <tr>
> <td>2</td>
> <td>Jacob</td>
> <td>Thornton</td>
> <td>@fat</td>
> </tr>
> <tr>
> <td>3</td>
> <td>Larry</td>
> <td>the Bird</td>
> <td>@twitter</td>
> </tr>
> </tbody>
> </table>

">

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

> <table class="table table-responsive">
> <thead>
> <tr>
> <th>#</th>
> <th>First Name</th>
> <th>Last Name</th>
> <th>Username</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td>1</td>
> <td>Mark</td>
> <td>Otto</td>
> <td>@mdo</td>
> </tr>
> <tr>
> <td>2</td>
> <td>Jacob</td>
> <td>Thornton</td>
> <td>@fat</td>
> </tr>
> <tr>
> <td>3</td>
> <td>Larry</td>
> <td>the Bird</td>
> <td>@twitter</td>
> </tr>
> </tbody>
> </table>

Look, I'm in a well!

> <div class="well well-sm">
> Look, I'm in a well!
> </div>

Look, I'm in a well!

> <div class="well">
> Look, I'm in a well!
> </div>

Look, I'm in a well!

> <div class="well well-lg">
> Look, I'm in a well!
> </div>