Buttons

There are rich classes for handling the look and feel of buttons.

Buttons

• btn basic class
• Apply to: button, a or input
• role="button" on a
• type="button" input or button

The basic button class is the btn class. It can be applied to either buttons, anchor tags or input fields.

If you're using a button on an anchor tag, you should add the role="button" property for assistive devices.

If you're using a button or input, you should add the type=button property.

Contextual Buttons

• btn{-outline}{-TYP}
  • BR: primary secondary success danger
warning info light dark link

Try it

In addition to the btn class, you add one contextual color class to your buttons.

There is a special btn-link class that makes the button look like a regular link, but still takes up the space of a button.

There is also an outline version of the buttons you can use by adding the outline keyword

Sizes

btn-sm btn-lg

Try it

There are three sizes for buttons. A small, a large size and then the regular size of the buttons.

Button Groups

• Button Group

btn-group btn-group-vertical

• Variation

btn-group-sm btn-group-lg

• Checkboxes/Radio

btn-check

Try it

Button groups give you a way to put buttons together. The basic class is a container that goes around the buttons you want to group. You can either choose a regular or a vertical version of this class.

There is a different style if you add the active class that works really well for outlines.

There are some different variations you can use like the two sizing classes. These go on the same container that have the btn-group class.

There is also a class for making the buttons stack on top of one another called btn-group-vertical

There's another real interesting class called btn-check that will really help to make checkboxes or radio input fields look like buttons, but behave in their normal manner as long as they're coded properly.