Buttons
| Button | Large Button | Small Button | Disabled Button | Button with Icon | Block Button |
|---|---|---|---|---|---|
| Default | Default | Default | Default | Default | Default |
| Primary | Primary | Primary | Primary | Primary | Primary |
| Success | Success | Success | Success | Success | Success |
| Info | Info | Info | Info | Info | Info |
| Warning | Warning | Warning | Warning | Warning | Warning |
| Danger | Danger | Danger | Danger | Danger | Danger |
Labeled buttons
Groups
Button dropdowns
Tables
Striped
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Bordered
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Forms
Inline
Horizontal
Form states
Validation states
Optional icon
Form Controls
Inputs
Checkbox
Radio
Select
Multiple Select
Form Controls Extended
Prepend / Append
Buttons
Checkboxes and radio
Navs
Stacked Tabs
Stacked Pills
Nav List
Tabs
I'm in Section 1. Donec vulputate tristique elit ut molestie. Suspendisse faucibus bibendum ipsum.
Howdy, I'm in Section 2.Morbi vel nibh et arcu pretium adipiscing. Ut vestibulum est eget justo facilisis ullamcorper.
Left Tabs
I'm in Section 1. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc vel eleifend nisl. Nulla eget erat ac massa suscipit suscipit.
Howdy, I'm in Section 2. Aenean tempor luctus sem quis euismod. Praesent nec metus eu urna tempor varius id quis mauris. Quisque interdum sollicitudin sollicitudin.
Right Tabs
I'm in Section 1. Praesent sit amet augue in orci laoreet adipiscing vel vitae urna. Pellentesque eget quam dui, sit amet eleifend mauris.
Howdy, I'm in Section 2. Quisque pharetra, arcu a consectetur aliquet, mi enim porta enim, quis sodales nisl justo et justo. Morbi non quam in eros varius molestie.
Bottom Tabs
I'm in Section 1. Mauris id augue id elit convallis accumsan. Nullam quis mauris lacus.
Howdy, I'm in Section 2. Praesent a rhoncus magna. Maecenas tellus mauris, vestibulum nec sagittis dignissim, malesuada at ante.
Navbar
Default
Inverted
Breadcrumbs
Labels
| Name | Label |
|---|---|
| Default | Default |
| Success | Success |
| Warning | Warning |
| Info | Info |
| Danger | Danger |
Thumbnails
Default
With Captions
Alerts
Progress Bar
Media List
-
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
-
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
-
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Wells
JavaScript Button
Stateful
Single toggle
Checkbox
Radio
Accordion
Toggle
Collapsible Panels
With panel styles
Carousel
Title 1
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Read more
Title 2
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Read more
A very long thumbnail title here to fill the space
Thumbnail Fade Carousel
Title 1
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies.
Read more
Title 2
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies.
Read more
Title 3
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies.
Read moreModal
Typeahead
Typography A small text
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Paragraph
Lorem ipsum dolor sit amet, a mark here adipisicing elit. Atque, iusto, minus sequi natus nesciunt rerum tenetur corrupti autem officiis fugiat expedita laudantium ea aspernatur
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, velit, facere eos molestias rerum nesciunt consequatur voluptate minus quod
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, vitae, dolore, ratione, neque deleniti officia atque dignissimos porro.
Consectetur adipisicing elit. Corrupti, aliquam, voluptates, nulla, blanditiis totam voluptatem voluptatum quod ipsa debitis non ab odio natus.
Lead text
Quisquam, dolorum, iusto iste voluptates rerum ea quas expedita.
Small text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis et ullam libero repellendus voluptatibus obcaecati magni id nulla dolores nesciunt. Quasi quisquam facilis nobis ullam rem deleniti vero consectetur earum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Panels
This is a panel paragraph
This is a panel paragraph
This is a panel paragraph
This is a panel paragraph
This is a panel paragraph
This is a panel paragraph
This is a panel paragraph
This is a panel paragraph
List Groups
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.