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:

• btn-primary - A button with a blue background color.
• btn-success - A button with a green background color.
• btn-info - A button with an blue background color.
• btn-warning - A button with a orange background color.
• btn-danger - A button with a red background color.
• btn-secondary - A button with a gray background color.
• btn-light - A button with a light background color.
• btn-dark - A button with a dark background color.
• btn-link - A button with a bluish style.

Example:

Code:

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

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:

Code:

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

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:

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

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:

• btn-sm - A small button.
• btn-lg - A large button.

Example:

Code:

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

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

Code:

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

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:

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

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>

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:

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

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.