{"id":7979,"date":"2023-01-04T18:29:11","date_gmt":"2023-01-04T18:29:11","guid":{"rendered":"https:\/\/www.jquery-az.com\/?p=7979"},"modified":"2023-09-30T09:30:11","modified_gmt":"2023-09-30T09:30:11","slug":"bootstrap-5-checkbox","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/","title":{"rendered":"Bootstrap 5 Checkbox [Simple, Inline, switch, indeterminate, buttons and more]"},"content":{"rendered":"<h3><strong>How to create Checkbox in Bootstrap 5?<\/strong><\/h3>\n<ul>\n<li>A check allows selecting one or more options from two or more available options in web forms.<\/li>\n<li>A checkbox has default browser behavior. By using Bootstrap 5 classes for checkboxes, you may improve the layout and behavior of checkboxes<\/li>\n<li>By using BS 5, you may create normal, intermediate, and disabled state checkboxes<\/li>\n<li>All these are shown in the example below.<\/li>\n<\/ul>\n<h3><strong>An example of creating normal Bootstrap 5 checkboxes<\/strong><\/h3>\n<ul>\n<li>For the input type checkbox, you will specify the <strong><em>.form-check-input<\/em><\/strong> class in order to apply the style provided by BS 5.<\/li>\n<li>For the checkbox label<strong><em>, <\/em><\/strong>use<strong><em> .form-check-label<\/em><\/strong> class and associate it to the input checkbox by using its <strong>id<\/strong>.<\/li>\n<li><strong>Structurally<\/strong>, the input and label act as siblings.<\/li>\n<\/ul>\n<p>Have a look at an example below where we created four checkboxes:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7980\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-1-Bootstrap5-checkbox.png\" alt=\"Bootstrap5-checkbox\" width=\"452\" height=\"173\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-1-Bootstrap5-checkbox.png 452w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-1-Bootstrap5-checkbox-300x115.png 300w\" sizes=\"(max-width: 452px) 100vw, 452px\" \/><\/p>\n<p><strong>Example code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"container m-4\"&gt;\r\n\r\n&lt;h2&gt;Which are you favourites?&lt;\/h2&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\"&gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"flexCheckDefault\"&gt;\r\n\r\n\u00a0 \u00a0 Java\r\n\r\n\u00a0 &lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" checked&gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"flexCheckChecked\"&gt;\r\n\r\n\u00a0 \u00a0 Python\r\n\r\n\u00a0 &lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" &gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"flexCheckChecked\"&gt;\r\n\r\n\u00a0 \u00a0 Kotlin\r\n\r\n\u00a0 &lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" checked&gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"flexCheckChecked\"&gt;\r\n\r\n\u00a0 \u00a0 C#\r\n\r\n\u00a0 &lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p>Particularly, notice two things:<\/p>\n<ul>\n<li><strong>Id<\/strong> of the check element i.e. flexCheckDefault<\/li>\n<li>for=&#8221;flexCheckDefault&#8221; for associating the label<\/li>\n<\/ul>\n<h3><strong>An example of indeterminate label<\/strong><\/h3>\n<p>You may use the <strong>.indeterminate<\/strong> pseudo-class for creating intermediate state checkboxes.<\/p>\n<p>No HTML attribute is available for specifying the indeterminate state, so it is done in <strong>JavaScript<\/strong>.<\/p>\n<p>See an example of creating intermediate checkboxes:<\/p>\n<h6><a href=\"\/bootstrap5\/demo.php?ex=58.0_2\" target=\"_blank\" rel=\"noopener nofollow\">Online demo and code<\/a><\/h6>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7981\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-7-checkbox-Indeterminate.png\" alt=\"checkbox-Indeterminate\" width=\"438\" height=\"176\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-7-checkbox-Indeterminate.png 438w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-7-checkbox-Indeterminate-300x121.png 300w\" sizes=\"(max-width: 438px) 100vw, 438px\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"container m-4\"&gt;\r\n\r\n&lt;h3 id=\"indeterminate\"&gt;Indeterminate Checboxes&lt;\/h3&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckIndeterminate\"&gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"flexCheckIndeterminate\"&gt;\r\n\r\n\u00a0 \u00a0 Bootstrap\r\n\r\n\u00a0 &lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckIndeterminate2\" &gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"flexCheckIndeterminate2\"&gt;\r\n\r\n\u00a0 Bulma\r\n\r\n\u00a0 &lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckIndeterminate3\" &gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"flexCheckIndeterminate2\"&gt;\r\n\r\n\u00a0 Materialize\r\n\r\n\u00a0 &lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckIndeterminate4\" &gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"flexCheckIndeterminate4\"&gt;\r\n\r\n\u00a0 Skeleton\r\n\r\n\u00a0 &lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n\r\n\u00a0 var x = document.getElementById(\"flexCheckIndeterminate\").indeterminate = true;\r\n\u00a0 var x = document.getElementById(\"flexCheckIndeterminate2\").indeterminate = true;\r\n\u00a0 var x = document.getElementById(\"flexCheckIndeterminate3\").indeterminate = true;\r\n\u00a0 var x = document.getElementById(\"flexCheckIndeterminate4\").indeterminate = true;\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p>Notice the JavaScript used at the end before &lt;\/body&gt; tag. i.e.<\/p>\n<blockquote><p>\u00a0 var x = document.getElementById(&#8220;flexCheckIndeterminate&#8221;).indeterminate = true;<\/p><\/blockquote>\n<h3><strong>An example of disabled checkboxes<\/strong><\/h3>\n<p>For creating disabled checkboxes, simply use the <strong><em>disabled<\/em><\/strong> attribute of HTML in the input type checkbox. As you add the <strong>disabled<\/strong> attribute, the associated label is also disabled and the user won\u2019t be able to interact with it.<\/p>\n<p>See an example below:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"container m-4\"&gt;\r\n\r\n&lt;h2&gt;Disabled Checkbox&lt;\/h2&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\" disabled&gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"flexCheckDefault\"&gt;\r\n\r\n\u00a0 \u00a0 Bootstrap\r\n\r\n\u00a0 &lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\" disabled&gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"flexCheckDefault\"&gt;\r\n\r\n\u00a0 Bulma\r\n\r\n\u00a0 &lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\" disabled&gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"flexCheckDefault\"&gt;\r\n\r\n\u00a0 Materialize\r\n\r\n\u00a0 &lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckDefault\" disabled&gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"flexCheckDefault\"&gt;\r\n\r\n\u00a0 Skeleton\r\n\r\n\u00a0 &lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Result:<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7982\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-2-BS5-checkbox-disabled.png\" alt=\"BS5-checkbox-disabled\" width=\"346\" height=\"198\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-2-BS5-checkbox-disabled.png 346w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-2-BS5-checkbox-disabled-300x172.png 300w\" sizes=\"(max-width: 346px) 100vw, 346px\" \/><\/p>\n<h3><strong>Creating Inline Checkboxes example<\/strong><\/h3>\n<p>Want to create inline checkboxes? Just use the <em><strong>.form-check-inline<\/strong><\/em> class to any <strong>.form-check<\/strong> for creating inline group of checkboxes.<\/p>\n<p>See an example and its output below:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"container m-4\"&gt;\r\n\r\n&lt;h3&gt;Inline Checkboxes&lt;\/h3&gt;\r\n\r\n&lt;div class=\"form-check form-check-inline\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"inlineCheckbox1\" value=\"option1\"&gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"inlineCheckbox1\"&gt;Bootstrap&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check form-check-inline\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"inlineCheckbox2\" value=\"option2\"&gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"inlineCheckbox2\"&gt;Bulma&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check form-check-inline\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"inlineCheckbox3\" value=\"option3\" disabled&gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"inlineCheckbox3\"&gt;Materialize (disabled)&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n&lt;div class=\"form-check form-check-inline\"&gt;\r\n\r\n\u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"inlineCheckbox3\" value=\"option4\"&gt;\r\n\r\n\u00a0 &lt;label class=\"form-check-label\" for=\"inlineCheckbox3\"&gt;Pure &lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7983\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-3-BS5-checkbox-inline.png\" alt=\"BS5-checkbox-inline\" width=\"570\" height=\"122\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-3-BS5-checkbox-inline.png 570w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-3-BS5-checkbox-inline-300x64.png 300w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-3-BS5-checkbox-inline-565x122.png 565w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><\/h3>\n<h3><strong>Turn checkboxes into switches<\/strong><\/h3>\n<p>You may turn a checkbox into a toggle switch easily. For that, simply use the <strong>.form-switch<\/strong> class to render a toggle switch.<\/p>\n<p>See an example below where we created six switches; one is checked, two are disabled and three are in normal state:<\/p>\n<h6><a href=\"\/bootstrap5\/demo.php?ex=58.0_5\" target=\"_blank\" rel=\"noopener nofollow\">Online demo and code<\/a><\/h6>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n\r\n&lt;head&gt;\r\n\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n&lt;div class=\"container m-4\"&gt;\r\n\r\n&lt;h3&gt;Switch Checkboxes&lt;\/h3&gt;\r\n\r\n&lt;div class=\"form-check form-switch\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"switchDefault\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;label class=\"form-check-label\" for=\"switchDefault\"&gt;Java&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check form-switch\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"switchChecked\" checked&gt;\r\n\r\n\u00a0 \u00a0 &lt;label class=\"form-check-label\" for=\"switchChecked\"&gt;Python&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check form-switch\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"switchDisabled\" disabled&gt;\r\n\r\n\u00a0 \u00a0 &lt;label class=\"form-check-label\" for=\"switchDisabled\"&gt;Fox Pro&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check form-switch\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"switchDefault\" &gt;\r\n\r\n\u00a0 \u00a0 &lt;label class=\"form-check-label\" for=\"switchDefault\"&gt;Kotlin&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check form-switch\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"switchDefault\" &gt;\r\n\r\n\u00a0 \u00a0 &lt;label class=\"form-check-label\" for=\"switchDefault\"&gt;Go Lang&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"form-check form-switch\"&gt;\r\n\r\n\u00a0 \u00a0 &lt;input class=\"form-check-input\" type=\"checkbox\" id=\"switchDisabled\" disabled&gt;\r\n\r\n\u00a0 \u00a0 &lt;label class=\"form-check-label\" for=\"switchDisabled\"&gt;COBOL&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<h3><strong>Checkbox as Toggle Button example<\/strong><\/h3>\n<p>Similarly, you may turn checkboxes into toggle buttons by using the <strong><em>.btn<\/em><\/strong> styles rather than .form-check-label on the &lt;label&gt; elements.<\/p>\n<p>An example below shows how:<\/p>\n<h6><\/h6>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7984\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-5-BS5-checkbox-toggle-btn.png\" alt=\"BS5-checkbox-toggle-btn\" width=\"367\" height=\"289\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-5-BS5-checkbox-toggle-btn.png 367w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-5-BS5-checkbox-toggle-btn-300x236.png 300w\" sizes=\"(max-width: 367px) 100vw, 367px\" \/><\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"container m-4\"&gt;\r\n\r\n&lt;h3&gt;Checkbox toggle buttons&lt;\/h3&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n&lt;input type=\"checkbox\" class=\"btn-check\" id=\"btn-check\" autocomplete=\"off\"&gt;\r\n\r\n&lt;label class=\"btn btn-primary\" for=\"btn-check\"&gt;Single toggle&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;br&gt;&lt;br&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n&lt;input type=\"checkbox\" class=\"btn-check\" id=\"btn-check-2\" checked autocomplete=\"off\"&gt;\r\n\r\n&lt;label class=\"btn btn-primary\" for=\"btn-check-2\"&gt;Checked&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;br&gt;&lt;br&gt;\r\n\r\n&lt;div class=\"form-check\"&gt;\r\n\r\n&lt;input type=\"checkbox\" class=\"btn-check\" id=\"btn-check-3\" autocomplete=\"off\" disabled&gt;\r\n\r\n&lt;label class=\"btn btn-primary\" for=\"btn-check-3\"&gt;Disabled&lt;\/label&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<h3><strong>Checkbox buttons \u2013 outlined style<\/strong><\/h3>\n<p>Similarly, you may create checkbox outlined buttons by using outline class as shown in the example below:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7985\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-6-checkbox-toggle-outline.png\" alt=\"checkbox-toggle-outline\" width=\"320\" height=\"284\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-6-checkbox-toggle-outline.png 320w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-6-checkbox-toggle-outline-300x266.png 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x\" crossorigin=\"anonymous\"&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"container m-4\"&gt;\r\n\r\n&lt;h3&gt;Toggle button outlined&lt;\/h3&gt;\r\n\r\n&lt;input type=\"checkbox\" class=\"btn-check\" id=\"btn-check-outlined\" autocomplete=\"off\"&gt;\r\n\r\n&lt;label class=\"btn btn-outline-success\" for=\"btn-check-outlined\"&gt;Single toggle Outlined&lt;\/label&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n\r\n&lt;input type=\"checkbox\" class=\"btn-check\" id=\"btn-check-2-outlined\" checked autocomplete=\"off\"&gt;\r\n\r\n&lt;label class=\"btn btn-outline-warning\" for=\"btn-check-2-outlined\"&gt;Checked Outlined&lt;\/label&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n\r\n&lt;input type=\"checkbox\" class=\"btn-check\" id=\"btn-check-2-outlined\" disabled autocomplete=\"off\"&gt;\r\n\r\n&lt;label class=\"btn btn-outline-warning\" for=\"btn-check-2-outlined\"&gt;Disabled Outlined&lt;\/label&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p>For reference: <a href=\"https:\/\/getbootstrap.com\/docs\/5.0\/forms\/checks-radios\/\" target=\"_blank\" rel=\"nofollow\">https:\/\/getbootstrap.com\/docs\/5.0\/forms\/checks-radios\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A check allows selecting one or more options from two or more available options in web forms.<br \/>\nA checkbox has default browser behavior. By using Bootstrap 5 classes for checkboxes, you may improve the layout and behavior of checkbox<\/p>\n","protected":false},"author":1,"featured_media":7982,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[136],"tags":[32,30],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap 5 Checkbox [Simple, Inline, switch, indeterminate, buttons]<\/title>\n<meta name=\"description\" content=\"A check allows selecting one or more options from two or more available options in web forms.A checkbox has default browser behavior. By using Bootstrap 5 classes for checkbox, you may improve the layout and behavior of checkbox\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap 5 Checkbox [Simple, Inline, switch, indeterminate, buttons]\" \/>\n<meta property=\"og:description\" content=\"A check allows selecting one or more options from two or more available options in web forms.A checkbox has default browser behavior. By using Bootstrap 5 classes for checkbox, you may improve the layout and behavior of checkbox\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-04T18:29:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-30T09:30:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-2-BS5-checkbox-disabled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"346\" \/>\n\t<meta property=\"og:image:height\" content=\"198\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/\",\"url\":\"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/\",\"name\":\"Bootstrap 5 Checkbox [Simple, Inline, switch, indeterminate, buttons]\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2023-01-04T18:29:11+00:00\",\"dateModified\":\"2023-09-30T09:30:11+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"description\":\"A check allows selecting one or more options from two or more available options in web forms.A checkbox has default browser behavior. By using Bootstrap 5 classes for checkbox, you may improve the layout and behavior of checkbox\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap 5 Checkbox [Simple, Inline, switch, indeterminate, buttons and more]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap 5 Checkbox [Simple, Inline, switch, indeterminate, buttons]","description":"A check allows selecting one or more options from two or more available options in web forms.A checkbox has default browser behavior. By using Bootstrap 5 classes for checkbox, you may improve the layout and behavior of checkbox","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap 5 Checkbox [Simple, Inline, switch, indeterminate, buttons]","og_description":"A check allows selecting one or more options from two or more available options in web forms.A checkbox has default browser behavior. By using Bootstrap 5 classes for checkbox, you may improve the layout and behavior of checkbox","og_url":"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/","article_published_time":"2023-01-04T18:29:11+00:00","article_modified_time":"2023-09-30T09:30:11+00:00","og_image":[{"width":346,"height":198,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2022\/12\/9-2-BS5-checkbox-disabled.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/","url":"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/","name":"Bootstrap 5 Checkbox [Simple, Inline, switch, indeterminate, buttons]","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2023-01-04T18:29:11+00:00","dateModified":"2023-09-30T09:30:11+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"description":"A check allows selecting one or more options from two or more available options in web forms.A checkbox has default browser behavior. By using Bootstrap 5 classes for checkbox, you may improve the layout and behavior of checkbox","breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/bootstrap-5-checkbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap 5 Checkbox [Simple, Inline, switch, indeterminate, buttons and more]"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/7979"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=7979"}],"version-history":[{"count":12,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/7979\/revisions"}],"predecessor-version":[{"id":9991,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/7979\/revisions\/9991"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/7982"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=7979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=7979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=7979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}