Bootstrap 5 button

Bootstrap 5 Buttons

Bootstrap 5 buttons are used to perform interactive actions such as form submit, reset, redirecting to other pages, etc.

Example:

Steps to create bootstrap 5 buttons :

  • Add .btn to the <button> element base class.
  • To assign background color of the <button>,use contextual class(.btn-*) to the <button> element base class to provide background color of the button.
  • Followings are the contextual classes: btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark, btn-link .

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Link Button

Code Explanation

Note:Please keep in mind that .btn & .btn-* is assigned to the <button> or <a> element base class.

Note! Please keep in mind that button can also be created by <a> and <input> elements.You have to follow above mention steps to create the button.

Outline Button

Steps : To create outline button:

  • Add .btn to any of the <button> , <a> & <input> element base class.
  • Assign btn-outline-* to any of the <button>,<a> & <input> element base class.
  • Followings are the outline contextual classes:btn-outline-primary, btn-outline-secondary, btn-outline-success, btn-outline-danger, btn-outline-warning, btn-outline-info, btn-outline-light, btn-outline-dark, btn-outline-link.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Code Explanation

Note: To create outline button assign .btn & .btn-outline-* to the <button> or <a> element base class.

Bootstrap 5 Buttons: Size

To create large and smaller button, use .btn-lg & .btn-sm class repectively.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Large Button

Small Button

Code Explanation

Note: Keep in mind that .btn-sm & .btn-lg is used to create smaller and larger buttons respectively.

Active & Disabled Button

An Active button(appear pressed) is created by assigning .active to the <button> base class while as to create disabled button(unclickable) assign .disabled to the <button> base class.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Disabled Link

Code Explanation

Note:To create active and disabled button assign .active & .disabled to the <button> or <a> element base class.

Block Level Buttons

Block level buttons span the entire width of the parent element and it is created by display and gap utility.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Block Level Button

Button showing block level in md breakpoint

Centering the button

Button Alignment

Code Explanation

Note: Please keep in mind that the block-level button covers the full available width.

Online Test / Quiz