Basic Styles

Colors

Color Buttons with .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger classes

Sizes

Four Size variations with .btn-lg .btn-sm .btn-xs classes


Disabled

Disable buttons by adding disabled attribute

Outline Buttons

Outline Buttons collors by .btn-outline-{ color } classes

Labeled Buttons

Sizes

Rounded Borders

Circle Buttons

Button Group

Combine buttons with .btn-group

Vertical buttons with .btn-group.vertical

Labeled Buttons

Justified Buttons

Justified buttons with the grid classes

Radio Button Group

Only one button might be in the pressed state

Checked Button Group

Multiple buttons could be pressed

Drop Downs

Choose & Select an Option
Change the Previous Option
Select an Option
Do Nothing
Do something else

Search

Search by typing from the list

Search in Menu

Filter Posts
Filter Posts

Tags With Search

Add new tags by clicking on the icon

Filter Posts

Inline

Dropdowns in the text

Show posts by
Jenny Hess
for
today

Pointing Dropdowns

Pointing dropdowns in the menu

  • Cras justo odio 14
  • Morbi leo risus 1

Drop Downs

Open Direction

By default dropdown opens into the visible space

Best Fit
Upward left
Upward Right

Menu
Menu

Static dropdown

No js is required

Dropdown Content

With Header
With Divider
With Icons

With Description
With Labels
With message

With Input
With Images

States

Loading Dropdown
Loading Dropdown
Error State
Error State
Success State
Disabled State
Disabled State
Disabled Item
Compact dropdowns
Compact
Compact

Drop-down Buttons

Colors

Regular buttons wrapped in .dropdown