Bootstrap 5 Button Outline

Bootstrap 5 provides a series of classes that can be used to create outline buttons in our project, i.e. buttons without background color. The outline button classes remove any background color or background image style applied to the buttons. We will use .btn-outline-* class to create the outline button, where * is replaced with the color name.

Button Outline 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

Syntax:

<button type="button" class="btn btn-outline-*">
 *
</button>

 

Example 1: In this example, we will use button outline classes to create the outline buttons.

Output:

👁 Image

Example 2: In this example, we will use button outline classes to create the outline buttons with font awesome icons.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/buttons/#outline-buttons