BOOTSTRAP 4 BUTTONS


In this tutorial, you will learn to create different types of buttons using bootstrap.

Bootstrap Buttons

Bootstrap provides us nine different kinds of button styles which can be achieved just by adding few classes. To start with the button use .btn class. Other than this you need to add any of nine classes.

The other extra classes can be used to easily create buttons of different styles, each serves its own semantic purpose.

Bootstrap 4 provide us nine different types of button, use these button classes to create a button of your choice. The button classes are:

Example:

Code:

Example

<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>
Try It

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.

Example:

Link

Code:

Example

<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">
Try It

Outline Buttons

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

Add btn-outline-* class to <button> tag to get the outline button.

Example:

Code:

Example

<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>
Try It

Button Sizes

Bootstrap provides us four different sizes of buttons, use these classes to create a button of your choice. The button size classes are:

Example:

Code:

Example

<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>
Try It

You can also create a block-level button that covers the full width of the parent element by adding .btn-block.

Code:

Example

<button class="btn btn-primary btn-block">Block Level Button</button>
<button class="btn btn-secondary btn-block">Block Level Button</button>
Try It

Bootstrap Disabled Buttons

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

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

Example:

Code:

Example

<button type="button" class="btn btn-primary" disabled>Disabled button</button>
<button type="button" class="btn btn-secondary" disabled>Disabled button</button>
Try It

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

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

Disabled buttons should include the aria-disabled="true" attribute to indicate the state of the 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>
Try It

Bootstrap Active Button

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

Example:

Code:

Example

<button type="button" class="btn btn-primary active">Active button</button>
<button type="button" class="btn btn-primary">Normal button</button>
Try It

Conclusion

We have covered all the button types and their use cases. We have also covered how to make a button look like a link and how to make a button look like a block-level element.

To learn how to make a button look like a button with an icon.

Points to remember:

  1. To create a basic button use .btn class.
  2. Bootstrap 4 provides 9 different types of button styles which are of different colors indicating different meanings.
  3. To create bordered button use .btn-bordered-* class (replace * with button theme you want)