Golang Tutorials - Learn Go Programming with Easy Step-by-Step Guides

Explore comprehensive Golang tutorials for beginners and advanced programmers. Learn Go programming with easy-to-follow, step-by-step guides, examples, and practical tips to master Go language quickly.

Bs5 Checks And Radios in Bootstrap

Bs5 Checks And Radios in Bootstrap

In Bootstrap 5 (BS5), checks and radios are custom-styled versions of HTML checkboxes and radio buttons. They offer accessible, flexible, and responsive form controls with options for inline display, switches, and toggles.


? Checkbox Example

<div class="form-check">  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">  <label class="form-check-label" for="defaultCheck1">    Default checkbox  </label></div>

? Radio Button Example

<div class="form-check">  <input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1" checked>  <label class="form-check-label" for="radio1">    First radio  </label></div><div class="form-check">  <input class="form-check-input" type="radio" name="exampleRadios" id="radio2" value="option2">  <label class="form-check-label" for="radio2">    Second radio  </label></div>

?? Inline Checks and Radios

<div class="form-check form-check-inline">  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">  <label class="form-check-label" for="inlineCheckbox1">1</label></div><div class="form-check form-check-inline">  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">  <label class="form-check-label" for="inlineCheckbox2">2</label></div>

? Switches (Toggle-style Checkboxes)

<div class="form-check form-switch">  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">  <label class="form-check-label" for="flexSwitchCheckDefault">Toggle this switch</label></div>
  • Adds a modern, iOS-style switch appearance.


? Disabled States

<div class="form-check">  <input class="form-check-input" type="checkbox" value="" id="disabledCheck" disabled>  <label class="form-check-label" for="disabledCheck">    Disabled checkbox  </label></div>
<div class="form-check">  <input class="form-check-input" type="radio" name="exampleRadios" id="disabledRadio" disabled>  <label class="form-check-label" for="disabledRadio">    Disabled radio  </label></div>

??? Custom Styles with Utilities

You can customize spacing and alignment using utility classes like ms-2, me-1, pt-1, form-check-reverse, etc.


Would you like an example of validation states, toggleable button groups with checks/radios, or form layouts next?

Disclaimer for AI-Generated Content:
The content provided in these tutorials is generated using artificial intelligence and is intended for educational purposes only.
html
docker
php
kubernetes
golang
mysql
postgresql
mariaDB
sql