Select, Checks/Radios & Range

Style <select> with .form-select. Sizes: .form-select-lg and .form-select-sm. Use multiple for multi-select lists.

Select

Style <select> with .form-select. Sizes: .form-select-lg and .form-select-sm. Use multiple for multi-select lists.

Real-life example: A styled select is like a dropdown menu at a food court — one choice from many options in a neat box.

Select dropdown

<label for="course" class="form-label">Choose course</label>
<select class="form-select" id="course">
  <option selected disabled>Pick one...</option>
  <option value="html">HTML & CSS</option>
  <option value="js">JavaScript</option>
  <option value="bs">Bootstrap 5</option>
</select>

Checks and Radios

Checkboxes use .form-check with .form-check-input and .form-check-label. Radios share the same structure but use type="radio" and the same name for one group.

Switch style uses .form-switch. Inline groups use .form-check-inline.

Real-life example: Checkboxes are like topping choices on pizza (pick many). Radios are like choosing one size — small, medium, or large.

Checkbox, radio, and switch

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="news" checked />
  <label class="form-check-label" for="news">Email me updates</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="level" id="beginner" checked />
  <label class="form-check-label" for="beginner">Beginner</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="level" id="advanced" />
  <label class="form-check-label" for="advanced">Advanced</label>
</div>

<div class="form-check form-switch mt-3">
  <input class="form-check-input" type="checkbox" id="darkSwitch" />
  <label class="form-check-label" for="darkSwitch">Dark mode</label>
</div>

Range

Range sliders use <input type="range" class="form-range">. Set min, max, and step attributes for control.

Real-life example: A range input is like a volume knob — slide left for quiet, right for loud.

Range slider

<label for="volume" class="form-label">Volume</label>
<input type="range" class="form-range" id="volume" min="0" max="100" step="5" />