tutorialstonight logo


Bootstrap provides us different predefined classes to create buttons. These classes can be used to easily create buttons of different style, each serves its own semantic purpose.

To create a basic bootstrap button use .btn class. Bootstrap4 provide us nine different types of button, use these button claases to create button of your choice. These button classes are :

  1. btn-primary
  2. btn-secondary
  3. btn-success
  4. btn-info
  5. btn-warning
  6. btn-danger
  7. btn-dark
  8. btn-light
  9. btn-link

Bootstrap button on <a> and <input> tag

Bootstrap's .btn classes are designed to be used with <button> tag, but it can be used with <a> and <input> tags also.

Add role="button" on <a> tag to appropriately convey their purpose.


Outline Buttons

The bootstrap's outline button have transparent background, colored text and colored border.

To create bordered button in bootstrap replace default modifier with .btn-outline-*.

Button Sizes

Using bootstrap classes you can customize size of buttons. Use .btn-lg to make button large and use .btn-sm to make button smaller.

You can also create block level button which cover full width of parent element by adding .btn-block.

Bootstrap Disabled Buttons

There are many situation when we want a disabled button. Example: when user has not filled all necessary input of a form, when user has not acceped term and condition and many more. So in such situation we disable button to stop further actions.

To make a button disabled use disabled boolean attribute to any button element.

disabled is a button attribute you can't use it on anchor tag (<a>).

To create a disabled button for <a> tag use .disabled class to it to make it visibally disabled.

Disabled buttons should include the aria-disabled="true" attribute to indicate state of element.

Bootstrap Active Button

As can disable a button, we can also make a button visibally active button. To make a button active use .active class.

Spinner Buttons

Using bootstrap you can easily create a spinner button by adding a spinner icon in a button. Spinner buttons indicates loading state of any applicaation.

Below is example of spinners in bootstrap:


To include spinner in button just enclose above code in your button.

points to remember Points to remember:
  1. To create basic button use .btn class.
  2. Bootstrap4 provides 9 different types of button style which are of different colors indicating different meaning.
  3. To create bordered button use .btn-bordered-* class (replace * with button theme you want)
Bootstrap 4 Button Groups