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.

HTML

<!DOCTYPE html>
<html>

<head>
    <!--Bootstrap CDN-->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>

<body class="m-2">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2> Checks and radios Outlined styles</h2>
        <input type="checkbox" class="btn-check" id="GFG1">
        <label class="btn btn-outline-primary" for="GFG1">
            Java Checkbox
        </label>
        <br>
        <input type="checkbox" class="btn-check" id="GFG2">
        <label class="btn btn-outline-secondary" for="GFG2">
            C++ Checkbox
        </label>
        <br>
        <input type="checkbox" class="btn-check" id="GFG3">
        <label class="btn btn-outline-warning" for="GFG3">
            HTML Checkbox
        </label>
        <br>
        <input type="checkbox" class="btn-check" id="GFG4">
        <label class="btn btn-outline-info" for="GFG4">
            CSS Checkbox
        </label>
    </div>
</body>

</html>

Output:

Bootstrap 5 Checks and Radios Outlined Styles

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

HTML

<!DOCTYPE html>
<html>

<head>
    <!--Bootstrap CDN-->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>
  
<body class="m-2">
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2> Checks and radios Outlined styles</h2>

        <input type="radio" class="btn-check" name="choose" id="GFG1">
        <label class="btn btn-outline-success" for="GFG1">
            Accept Radio Button
        </label>

        <input type="radio" class="btn-check" name="choose" id="GFG2">
        <label class="btn btn-outline-danger" for="GFG2">
            Reject Radio Button
        </label>
    </div>
</body>
</html>

Output:

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

Bootstrap 5 Checks and Radios Outlined Styles

Explore