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
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
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.
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.