Bootstrap 5 Buttons

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

Example:

Link Button

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

<div class="container">

  <h2 class="text-center">Block Level Button</h2>

<div class="row">

<div class="col-sm-8 offset-sm-2 d-grid gap-2"> 
  
<div class="d-grid gap-2">

  <button class="btn btn-primary" type="button">Button1</button>

  <button class="btn btn-primary" type="button">Button2</button>

</div>

<h4>Button showing block level in md breakpoint </h4>

<div class="d-grid gap-2 d-md-block">

  <button class="btn btn-primary" type="button">Button</button>

  <button class="btn btn-primary" type="button">Button</button>

</div>

<h4>Centering the button </h4>

<div class="d-grid gap-2 d-md-block mx-auto">

  <button class="btn btn-primary" type="button">Button</button>

  <button class="btn btn-primary" type="button">Button</button>

</div>


<h2>Button Alignment </h2>

<div class="d-grid gap-2 d-md-flex justify-content-md-end">

  <button class="btn btn-primary me-md-2" type="button">Button</button>
  
  <button class="btn btn-primary" type="button">Button</button>
</div>

  </div>

 
</div><!--/row-->

</div><!--/container-->

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

Question set 1

Bootstrap 5 Buttons

General Syntax

Source Code

Source Code : Output

Code Explanation

Outline Button

Example

General Syntax

Source Code

Source Code : Output

Code Explanation

Bootstrap 5 Buttons: Size

Example

General Syntax

Source Code

Source Code : Output

Large Button

Small Button

Code Explanation

Active & Disabled Button

Example

General Syntax

Source Code

Source Code : Output

Code Explanation

Block Level Buttons

Example

General Syntax

Source Code

Source Code : Output

Block Level Button

Button showing block level in md breakpoint

Centering the button

Button Alignment

Code Explanation

Online Test / Quiz

Our Tutorials