Bootstrap 4 Components


You can add buttons to a form, dialogs, and navigation using the class .btn followed by one of the seven predefined button styles each having its own semantic purposes.

Button Tags

The class .btn is designed to be used with <button> element. But can be used within anchor element <a>...</a> and within <input> elements, although it is recommended to use <button> tags as it has better consistency across browsers.


Note: if you are using <a> element to act as a button rather than for navigation purpose, use role=button for understanding their purpose by assistive technologies like screen readers.

Button Outlines

If you want to remove the background colors that each button styles come with or any other background images, you can replace the default modifier classes with .btn-outline-primary class. This will remove the background color and draws an outline around the button with the semantic color.

Button Size

You can change the size of the button to a smaller one or a larger one using .btn-sm .btn-lg classes.

We can create a block level button that spans the length of its parent by adding .btn-block.

Active State

You don't need to specify any particular class with <button> to indicate its active state although you can use .active class and .aria-pressed=true attribute to force that behavior into an element that is behaving as a button.

Primary link Link

Disabled State

You can make buttons look disabled by adding a disabled boolean attribute to <button> element. But in cases when you are using an <a> element you have to use .disabled class for the button to appear disabled.

  • When using a <button> element

  • When using <a> element

    Primary link Link

Note: to indicate the state of the button to assistive technologies include aria-disabled="true" in the <a> element with the .disabled class.

Toggle State

Add class data-toggle=”button”  to toggle a button's active state.