Bootstrap Buttons

The buttons are used for a variety of purposes. Styling them according to their usage not only makes them look good but also understandable to the user.

Let’s have a look at the different features that Bootstrap has for buttons.

Button Styles

Bootstrap 4 has following contextual classes for styling the buttons.

  • .btn: Basic styling class for button element.
  • .btn-default: For a standard button style.
  • .btn-primary: Has two purposes. Styling the button with extra visual weight and identifying the primary action in a set of buttons
  • .btn-success: To indicate any positive or successful action
  • .btn-info: Any informative alert message or neutral action can be indicated using this class with the buttons
  • .btn-warning: A cautionary notification button suggesting special attention for any action
  • .btn-danger: Any non-recommended or potentially negative action can be notified usin this button class.
  • .btn-link: The button, using this class, looks like a link.

Here’s a sample code illustrating the use of all these classes while describing their purpose.

The above mentioned classes can be used with button (<button>), anchor <a> or even input (<input>) elements. Here’s an example

Button Sizes

There are four classes to indicate different button sizes in Bootstrap. Here are the four:

  • .btn-lg: For a large sized button
  • .btn-sm: For a small sized buttons
  • .btn-xs: For extra-small sized buttons
  • .btn-block: For block level buttons.            

Here’s the sample code to illustrate the uses for these contextual classes:

Block Level Buttons

These are special type of buttons that take the entire width of whatever containing element they are in.

the class .btn-block can be used to create such block level buttons:

Active/Disabled Buttons

You can set the active (appear pressed) or a disabled (unclickable) state by using the .active and unclickable classes.

Following code illustrates the same:

Button Group Classes

These are special group classes that can also be used with <a> and <input> tags along with the <button> elements:

  • .btn-group: Used to group the buttons on a single line.
  • .btn-group-justified: Along with grouping the buttons like above, it makes them span across the entire screen width
  • .btn-group-lg: Making buttons larger in a group. Basically, the padding and the font sizes are increased for all the grouped buttons
  • .btn-group-sm: Making buttons small in a group. Basically, the padding and the font sizes are made small for all the grouped buttons
  • .btn-group-xs Making buttons extra-small in a group. Basically, the padding and the font sizes are made extra-small for all the grouped buttons
  • .btn-group-vertical: The grouped buttons are stacked vertically as per the space or screen requirement.