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.


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.


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.


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.


Use predefined modifications to make it better.

Add pagination--space to pagination to get spaces between items.

Template settings

Use this panel to configure template settings and layout options.

Layout option
Header options
Navigation options
Sidepanel options
Content options