Buttons
The Right Way - Admin Template
Default buttons
Example of several bootstrap buttons with custom styles.
btn btn-primary button with main theme background color.
btn btn-secondary secondary background color.
btn btn-success success style button.
btn btn-danger danger style button.
btn btn-warning warning style button.
btn btn-info info style button.
btn btn-light lignt style button.
btn btn-dark dark style button.
btn btn-link link style button.
Outline buttons
Add btn-outline-* class to use outline style buttons.
btn btn-outline-primary main theme color.
btn btn-outline-secondary secondary color.
btn btn-outline-success success style button.
btn btn-outline-danger danger style button.
btn btn-outline-warning warning style button.
btn btn-outline-info info style button.
btn btn-outline-light lignt style button.
btn btn-outline-dark dark style button.
Sizes
Use btn-lg and btn-sm to customize button size.
btn btn-light btn-lg large button example.
btn btn-light default size button example.
btn btn-light btn-sm small size button example.
btn btn-light btn-xs extra small size button example.
Block level button
Use class btn-block to get full width button.
Button group
Wrap a series of buttons with .btn in .btn-group.
Wrap a series of buttons with .btn-group-vertical to get vertical variation.
States
Add active and disabled to change button state.
btn btn-light active link button with active state.
btn btn-light disabled link button with disabled state.
Button btn btn-light width disabled attribute.
Toggle states
Add data-toggle="button" to toggle a button’s active state.
Basic example with toggle state functionality.
Checkbox and radio buttons
Same example for button style checkboxes.
Button with icon
Add btn--icon class to simply use icons. Add btn--icon-right to get right side aligned icon.
Stacked icon
Use btn--icon-stacked with btn--icon to get stacked icon. Add btn--icon-right to get right side aligned icon.
With icon only
Add btn-icon class to use button with icon only.
btn btn-light btn-lg btn-icon large button with icon example.
btn btn-light btn-icon default button with icon example.
btn btn-light btn-sm btn-icon small button with icon example.
Pagination
Example of pagination to indicate a series of related content exists across multiple pages.
Custom size
Use pagination-lg or pagination-sm to get custom pagination size.
Modifications
Use predefined modifications to make it better.
Add pagination--space to pagination to get spaces between items.