Buttons Add to shortcut list

The button component that is part of Bootstrap is expanded with several variants and some additional classes.

Default button

Simply use class btn-default

Primary button

Simply use class btn-primary

Success button

Simply use class btn-success

Info button

Simply use class btn-info

Warning button

Simply use class btn-warning

Danger button

Simply use class btn-danger

Danger outline button

Simply use class btn-outline-danger

Danger outline button

Simply use class btn-outline-warning

Info outline button

Simply use class btn-outline-info

Success outline button

Simply use class btn-outline-success

Primary outline button

Simply use class btn-outline-primary

Default outline button

Simply use class btn-outline-default

Sizes

The button of any variant can have different sizes.
Large button

Simply use class btn-lg

Default button

No class required for default size.

Small button

Simply use class btn-sm

Extra small button

Simply use class btn-xs

Pill button

Simply use class btn-pill

Pill button (thick)

Simply use class btn-thick

Buttons of any size or variant can become more than rounded by using btn-pill class, whilst if btn-thick class is added it becomes more pronounced.

Labeled buttons

Buttons of any size or variant may be added an additional label as in examples presented below.
Labeled button

Button with label and arrow

Labeled button

Button with label and arrow

Labeled button

Button with label and arrow

Labeled button

Button with label and arrow

Labeled button

Button with label and arrow

Add to cart
Labeled button

Button with label and arrow

Add to cart
Labeled button

Button with label

Labeled button

Button with label

Button groups and dropdowns

An indefinite number of buttons can be grouped horizontally or vertically.
Series of pill buttons

Containing radio inputs to enable toggling

Button toolbar (small size)

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar">

Single button dropdown

Turn a button into a dropdown toggle.

Single button dropup

Similarly, only with a separate button.

Single button dropdown

Similarly, only with a separate button.

Single button dropup

Similarly, create split button dropdowns.

Button with others

The following examples are some cases but not the only ones on how this component can be composed with others.
File upload button

Click here to see a real example.

Buttons with arrow

Small buttons with default size of arrow.

256k 256k 256k 256k
Disabled button with spinner

A button can show a loading indicator.

Button with square container

A button can have only an icon

Icon button

Icon button with badge above right

Expander button

Expander button to indicate and toggle hidden text (inspired by Primer)

Upgrading To Laravel 5.1.11

Note: Laravel 5.1.11 includes support for authorization and policies. Incorporating these new features into your existing Laravel 5.1 applications is simple. These upgrades are optional, and ignoring them will not affect your application.

Buy Elephant Now!
  • Theme Settings
  • Header fixed
  • Sidebar fixed
  • Sidebar sticky*
  • Sidebar collapsed
  • Footer fixed
  • Sidebar sticky* - by scrolling up and down the page, the menu placed on the sidebar moves along with the content until the bottom of the menu is reached. Learn more