Basic Buttons Component

Buttons Component

Buttons include support for a handful of contextual variations, sizes, states, and more. Group a series of buttons together on a single line with the button group.

Buttons options Class Description
Basic button .btn.btn-* Use any template color from COLOR PALETTE that you like to use for button.
Round button .btn-round For round button.
Square button .btn-square For square button.
Button group .btn-group Group a series of buttons together on a single line with the button group.
Button Size .btn-[lg/sm] For fancy larger or smaller buttons size.
Button block .btn-block Create block level buttons—those that span the full width of a parent.
Outline button .btn-outline-* Use any template color from COLOR PALETTE that you like to use for outline button.
Vertical button group .btn-group-vertical To create vertical button group.

You can also create button dropdowns and split button using .btn-group wrapper.

Using above options, create some combinations like:

  • Buttons with icon
  • Buttons with only icon
  • Round Buttons with icon
  • Round Buttons with only icon
  • Square Buttons with icon
  • Square Buttons with only icon
  • Outline Buttons with icon
  • Outline Buttons with only icon
  • Outline Buttons with only icon, etc...

Referrals :

Type URL
Bootstrap Buttons https://getbootstrap.com/docs/4.2/components/buttons/
Button Groups https://getbootstrap.com/docs/4.2/components/button-group/
Template Page https://modernadmin.evolvision.com/components/basic-button>