Button | Large Button | Small Button | Disabled Button | Button with Icon | Block Button |
---|---|---|---|---|---|
Default | Default | Default | Default | Default | Default |
Primary | Primary | Primary | Primary | Primary | Primary |
Info | Info | Info | Info | Info | Info |
Success | Success | Success | Success | Success | Success |
Warning | Warning | Warning | Warning | Warning | Warning |
Danger | Danger | Danger | Danger | Danger | Danger |
Groups
Button dropdowns
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 |
Inline
Horizontal
Inputs
Checkbox
Radio
Select
Multiple Select
Prepend / Append
Buttons
Checkboxes and radio
Pills
Stacked Pills
Stacked Pills in well
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.
Justified
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.
Integer ac nisl et urna gravida malesuada. Pellentesque iaculis tortor metus. Quisque scelerisque nibh id nisl feugiat eu vestibulum mauris vestibulum.
Name | Label |
---|---|
Default | Default |
Primary | Success |
Success | Success |
Warning | Warning |
Info | Info |
Danger | Danger |
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
Stateful
Single toggle
Checkbox
Radio
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.
Quisquam, dolorum, iusto iste voluptates rerum ea quas expedita.
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
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
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