Buttons

1. Large Buttons
2. General Buttons
3. Small Buttons

Round Buttons

4. Round Large Buttons
5. Round General Buttons
6. Round Small Buttons

Tags

Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
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.
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Alphabet Group

Icon buttons

1. Large icon Buttons
1. General icon Buttons
1. Small icon Buttons

Checkbox

Todo-list

1.General todo-list
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
2.Hover todo-list
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
3.Read/Unread todo-list
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque eius error et, excepturi harum illum inventore iste labore.

Users list

1. Users list
Shakti Kumar Das
Shakti Kumar Das
Active
Masum Billah
Masum Billah
Invite
Sharuk Khan
Sharuk Khan
Inactive
2. Hover users list
Shakti Kumar Das
Shakti Kumar Das
Active
Masum Billah
Masum Billah
Invite
Sharuk Khan
Sharuk Khan
Inactive
3. Users list
Shakti Kumar Das
Shakti Kumar Das
Masum Billah
Masum Billah
Sharuk Khan
Sharuk Khan

General form design

Field is required

Small form fields

Field is required

Modal






Avatar size

.avatar-xs
avatar-xs
.avatar-sm
avatar-sm
.avatar-md
avatar-md
.avatar-lg
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 @twitter
2. Table
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
3. Table Hover
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
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 @twitter