Bootstrap 5 Button group Outlined styles

Button group is a component provided by Bootstrap 5 which helps to combine the buttons in a series in a single line. For the Button group outlined style, we will create a div element with class .btn-group and inside the div element, we will create button elements.

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 Group 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:

<div class="btn-group" role="group" 
 aria-label="label content">
 <button type="button" class="btn btn-outline-*">
 Button
 </button>
 ...
</div>

Example 1: In this example, we will create a button group with outline styles using button outline classes.

Output:

👁 Image

Example 2: In this example, we will create an icon button group with outline styles using button outline classes.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/button-group/#outlined-styles