Bootstrap 5 Buttons & Styles

Bootstrap 5 Buttons

Bootstrap 5 Buttons

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

Steps to create bootstrap 5 buttons :

• Add .btn to the <button> element base class.
• To assign the background color of the <button>, use contextual class(.btn-*) to the <button> element base class to provide the background color of the button.
• The 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

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button" />
<input type="submit" class="btn btn-info" value="Submit Button" />

Source Code

<div class="container mt-4">
  <a href="#" class="btn btn-secondary" role="button">Link Button</a>
  <button type="button" class="btn btn-info">Button</button>
  <input type="button" class="btn btn-primary" value="Input Button" />
  <input type="submit" class="btn btn-success" value="Submit Button" />
</div><!--/container-->

Outline Button

Steps: To create an 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.
• The 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.

General Syntax

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>

Source Code

<div class="container mt-4">
  <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>
</div>

To learn more about the Bootstrap 5 button, click here.