Buttons
Round Buttons
Tags
Media left
This is some text within a card block.Media left center
This is some text within a card block.Media left bottom
This is some text within a card block.Media right
This is some text within a card block.Media right center
This is some text within a card block.Media right bottom
This is some text within a card block.Media left
This is some text within a card block.Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereIcon buttons
Checkbox
Todo-list
Users list









General form design
Small form fields
Dropdown
1. Button type dropdown
1. Text and a
tag dropdown
1. Icon dropdown
Modal
Avatar size
.avatar-xs

.avatar-sm

.avatar-md

.avatar-lg

Tabs
1. Default
2. Center align
3. Right align
4. Fill/justify
5. Vertical left
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam commodi expedita illum itaque libero maxime necessitatibus nisi officiis optio quidem quos recusandae, reiciendis sequi veniam veritatis? Assumenda eum laboriosam nisi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam commodi expedita illum itaque libero maxime necessitatibus nisi officiis optio quidem quos recusandae, reiciendis sequi veniam veritatis? Assumenda eum laboriosam nisi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam commodi expedita illum itaque libero maxime necessitatibus nisi officiis optio quidem quos recusandae, reiciendis sequi veniam veritatis? Assumenda eum laboriosam nisi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam commodi expedita illum itaque libero maxime necessitatibus nisi officiis optio quidem quos recusandae, reiciendis sequi veniam veritatis? Assumenda eum laboriosam nisi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt eaque eum ex modi veniam. A, ab aliquid asperiores autem beatae commodi, distinctio eaque eveniet placeat, possimus quae quisquam saepe! Nostrum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt eaque eum ex modi veniam. A, ab aliquid asperiores autem beatae commodi, distinctio eaque eveniet placeat, possimus quae quisquam saepe! Nostrum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt eaque eum ex modi veniam. A, ab aliquid asperiores autem beatae commodi, distinctio eaque eveniet placeat, possimus quae quisquam saepe! Nostrum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt eaque eum ex modi veniam. A, ab aliquid asperiores autem beatae commodi, distinctio eaque eveniet placeat, possimus quae quisquam saepe! Nostrum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, et eum non quaerat quia ratione, recusandae reiciendis similique sint soluta vitae voluptates. Hic labore odit placeat quaerat. Aliquam, ipsum nisi?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, et eum non quaerat quia ratione, recusandae reiciendis similique sint soluta vitae voluptates. Hic labore odit placeat quaerat. Aliquam, ipsum nisi?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, et eum non quaerat quia ratione, recusandae reiciendis similique sint soluta vitae voluptates. Hic labore odit placeat quaerat. Aliquam, ipsum nisi?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, et eum non quaerat quia ratione, recusandae reiciendis similique sint soluta vitae voluptates. Hic labore odit placeat quaerat. Aliquam, ipsum nisi?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi corporis cupiditate, dignissimos illum impedit, laborum magnam minus odio, quia quibusdam quisquam recusandae sequi tenetur. Animi ea nobis quam quos sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi corporis cupiditate, dignissimos illum impedit, laborum magnam minus odio, quia quibusdam quisquam recusandae sequi tenetur. Animi ea nobis quam quos sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi corporis cupiditate, dignissimos illum impedit, laborum magnam minus odio, quia quibusdam quisquam recusandae sequi tenetur. Animi ea nobis quam quos sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi corporis cupiditate, dignissimos illum impedit, laborum magnam minus odio, quia quibusdam quisquam recusandae sequi tenetur. Animi ea nobis quam quos sit!
Table
1. Table
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Mark | Otto | @TwBootstrap |
3 | Jacob | Thornton | @fat |
4 | Larry the Bird |
2. Table
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Mark | Otto | @TwBootstrap |
3 | Jacob | Thornton | @fat |
4 | Larry the Bird |
3. Table Hover
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Mark | Otto | @TwBootstrap |
3 | Jacob | Thornton | @fat |
4 | Larry the Bird |
3. Responsive Table
Number | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Mark | Otto | @TwBootstrap |
3 | Jacob | Thornton | @fat |
4 | Larry the Bird |