Default
Dropup
Left submenu
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
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>
|
Important | 6 |
<span class="badge badge-important">6</span>
|
Info | 8 |
<span class="badge badge-info">8</span>
|
Inverse | 10 |
<span class="badge badge-inverse">10</span>
|
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
Explore all your options with the various grid classes available to you. You can also mix and match different sizes.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
<p>Sample text here...</p>
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
Mark | Otto | @TwBootstrap | |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
# | Product | Payment Taken | Status |
---|---|---|---|
1 | TB - Monthly | 01/04/2012 | Approved |
2 | TB - Monthly | 02/04/2012 | Declined |
3 | TB - Monthly | 03/04/2012 | Pending |
4 | TB - Monthly | 04/04/2012 | Call in to confirm |
Button | class="" | Description |
---|---|---|
btn |
Standard gray button with gradient | |
btn btn-primary |
Provides extra visual weight and identifies the primary action in a set of buttons | |
btn btn-info |
Used as an alternative to the default styles | |
btn btn-success |
Indicates a successful or positive action | |
btn btn-warning |
Indicates caution should be taken with this action | |
btn btn-danger |
Indicates a dangerous or potentially negative action | |
btn btn-inverse |
Alternate dark gray button, not tied to a semantic action or use | |
btn btn-link |
Deemphasize a button by making it look like a link while maintaining button behavior |