Bootstrap Buttons

Bootstrap provides many custom button styles. These buttons are used in forms and dialog boxes for actions. Bootstrap offers various predefined classes for providing styles to buttons.

There are many classes that are used to provide style to the buttons, are give below:-

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

Syntax

Output

Bootstrap 4 Buttons

Button Elements

We can also use the button classes on multiple HTML elements such as anchor (<a>) tag, button (<button>) tag, and input (<input>) tag.

Syntax

Output

Bootstrap 4 Buttons

Button Outline

This type of buttons has a colored outline without any background color and background image. The .btn-outline-* class is used to create a button outline.

Syntax

Output

Bootstrap 4 Buttons

Button Sizes

The .btn-lg class is used to create buttons that are larger in size than the default size. The  .btn-sm class is used to create that are smaller in size than the default size.

Syntax

Output

Bootstrap 4 Buttons

Block Level Buttons

Block level buttons cover the full width of the screen or parent element. The .btn-block class is used to create block-level buttons.

Syntax

Output

Bootstrap 4 Buttons

Active/Disabled Buttons

Bootstrap 4 offers classes that allow us to create active or pressed buttons and disabled-buttons. The .active class is used to create active buttons, and by adding a disabled attribute, the active button will get disabled.

Syntax

Output

Bootstrap 4 Buttons