Bootstrap 5 Checks and Radios Outlined Styles
Last Updated :
22 Dec, 2022
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>
<link href=
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>
<link href=
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:
Bootstrap 5 Checks and Radios Outlined Styles
References: https://getbootstrap.com/docs/5.0/forms/checks-radios/#outlined-styles
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...