Bootstrap 5 Checks and Radios Outlined Styles

Bootstrap 5 provides us with utility Checks and radios with outlined styles for different looks, designs,s and background colors.

Checks and radios Outlined styles Classes: No special classes are used in Outlined styles. You can customize the component using Button Outline.  Different variants of .btn classes can be used to provide styled outlined checkboxes/radio buttons.

Syntax:

<input type="checkbox" class="btn-check" id="GFG">
<label class="btn btn-outline-primary" for="GFG">
 ...
</label>

Example 1: In this example, we will learn about Outlined Styled Checkboxes.

Output:

👁 Bootstrap 5 Checks and Radios Outlined Styles

Example 2: In this example, we will learn about Outlined Styled Radios.

Output:

👁 Bootstrap 5 Checks and Radios Outlined Styles

References: https://getbootstrap.com/docs/5.0/forms/checks-radios/#outlined-styles