Tutorials Tonight's Logo
Follow Us


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. Bootstrap 4 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

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
▶ Run the code

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.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button primary</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit Button">
<input class="btn btn-primary" type="reset" value="Reset Button">
▶ Run the code

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 type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
▶ Run the code

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.

<button class="btn btn-primary btn-lg">Large button</button>
<button class="btn btn-primary">Normal button</button>
<button class="btn btn-primary btn-sm">Small button</button>
▶ Run the code

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

<button class="btn btn-primary btn-block">Block Level Button</button>
<button class="btn btn-secondary btn-block">Block Level Button</button>
▶ Run the code

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.

<button type="button" class="btn btn-primary" disabled>Disabled button</button>
<button type="button" class="btn btn-secondary" disabled>Disabled button</button>
▶ Run the code

Note: 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.

<a href="#" class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>
▶ Run the code

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.

<button type="button" class="btn btn-primary active">Active button</button>
<button type="button" class="btn btn-primary">Normal button</button>
▶ Run the code

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:

<div class="spinner-border" role="status"></div>
<div class="spinner-grow" role="status"></div>

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

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm"></span> Loading...
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm"></span> Loading...
▶ Run the code

Points to remember:

  1. To create basic button use .btn class.
  2. Bootstrap 4 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)

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Bootstrap 4 Button Groups

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.