Bootstrap Buttons

There are seven styles to add a button in Bootstrap. Use the following classes to achieve the different button styles:

  • .btn
  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

Example -

Let's see all buttons supported in Bootstrap 4

Example -

Bootstrap Button Size

The classes that define the different sizes are:

  • .btn-lg
  • .btn-sm
  • .btn-xs

Example -

Bootstrap Enable/Disable Buttons

You can set a button disable or unclickable state.

Example -

Bootstrap Block level buttons

The block level button covers the entire width of the parent element.

Add class .btn-block to create a block level button:

Example -

Button Classes with other elements

You can use button classes with other tags i.e. <a>, <button>, or <input> element etc.

Example -

Button Outline/ Bordered buttons

Bootstrap 4 provides eight outline/bordered buttons:

Example -