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" > w3wiki </ 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:
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" > w3wiki </ 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
Contact Us