Bootstrap Checkboxes Radios And Select Menus Complete Guide

Last Update:2025-06-22T00:00:00 .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION. 7 mins read Difficulty-Level: beginner

Understanding the Core Concepts of Bootstrap Checkboxes, Radios, and Select Menus

Bootstrap Checkboxes, Radios, and Select Menus

Introduction Bootstrap, a popular front-end development framework, provides a variety of pre-designed components that make designing web pages quicker and more consistent. Among these components are checkboxes, radios, and select menus. These input elements are crucial for gathering user preferences and data in web applications.

Bootstrap Checkboxes Bootstrap checkboxes are used to allow users to select zero, one, or more options from a list. They come with default and custom styles, both of which can be easily integrated into any project.

Default Checkboxes Bootstrap includes default styles for checkboxes that integrate seamlessly with the look and feel of the rest of the framework. Here’s how to implement them:

<!-- Default styled checkbox -->
<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>

Custom Checkboxes For a more modern look and improved usability, Bootstrap offers a set of custom checkboxes:

<!-- Custom styled checkbox -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="customSwitch1">
  <label class="form-check-label" for="customSwitch1">
    Custom switch checkbox
  </label>
</div>

Radios Radios are a type of form input in which users can select exactly one option from a set. Bootstrap supports both default and custom radio buttons.

Default Radios These integrate with the default Bootstrap styling and are easy to implement:

<!-- Default styled radio -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>

Custom Radios For a more polished interface, use Bootstrap’s custom radios:

<!-- Custom styled radio -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="customRadio" id="customRadio1" value="option1" checked>
  <label class="form-check-label" for="customRadio1">
    Custom radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="customRadio" id="customRadio2" value="option2">
  <label class="form-check-label" for="customRadio2">
    Second custom radio
  </label>
</div>

Select Menus Select menus (also known as dropdown lists) allow users to choose one option from a list of items. Bootstrap provides a basic styling and also supports multiple selection.

Default Select Menu Bootstrap’s default styles for the select element look good out of the box:

<!-- Default select menu -->
<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Custom Select Menu For a more advanced and customizable experience, Bootstrap provides a custom select:

<!-- Custom select menu -->
<div class="form-group">
  <label for="exampleFormControlSelect1">Example select</label>
  <select class="form-control form-select" id="exampleFormControlSelect1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

Multiple Selection Bootstrap select menus can also allow for multiple selections:

<!-- Multiple select menu -->
<select class="form-select" multiple aria-label="multiple select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Grouping Options Option groups can organize related options within a select menu:

<!-- Select menu with option groups -->
<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <optgroup label="Group 1">
    <option value="1">One</option>
    <option value="2">Two</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="3">Three</option>
    <option value="4">Four</option>
  </optgroup>
</select>

Important Tips

Accessibility: Always use labels that clearly describe the purpose of each input element.
Responsive Design: Ensure your forms are responsive and work seamlessly on all devices.
Validation: Use Bootstrap’s validation classes to provide immediate feedback to users.
Custom Styles: Use Bootstrap’s custom component styles to achieve a cohesive and modern look.
JavaScript Enhancements: Bootstrap’s select component can be enhanced with JavaScript for better usability, such as searchable dropdowns.

Conclusion

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement Bootstrap Checkboxes, Radios, and Select Menus

Getting Started with Bootstrap

First, you need to include the Bootstrap CSS (and optionally, Bootstrap's JavaScript if you plan to use any interactive components) in your HTML file. You can do this using CDN links.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Form Elements</title>
    <!-- Include Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">

    <!-- Example content will go here -->

</div>

<!-- Include jQuery and Bootstrap JS (if needed) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>

Bootstrap Checkboxes

Checkboxes are used when you want the user to select multiple options from a set of available choices.

Basic Checkbox Example

Here is an example of how to create a basic checkbox using Bootstrap:

<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>

Disabled Checkbox Example

To disable a checkbox, simply add the disabled attribute:

<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
    <label class="form-check-label" for="defaultCheck2">
        Disabled checkbox
    </label>
</div>

Bootstrap Radios

Radios are used when you want the user to select only one option from a set of choices.

Basic Radio Example

Below is an example of a single radio button:

<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadio1" value="option1">
    <label class="form-check-label" for="exampleRadio1">
        Option 1
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadio2" value="option2">
    <label class="form-check-label" for="exampleRadio2">
        Option 2
    </label>
</div>

Disabled Radio Example

You can disable a radio button by adding the disabled attribute:

<div class="form-check">
    <input class="form-check-input" type="radio" name="disabledRadio" id="disabledRadio1" value="option1" disabled>
    <label class="form-check-label" for="disabledRadio1">
        Disabled Radio 1
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="disabledRadio" id="disabledRadio2" value="option2">
    <label class="form-check-label" for="disabledRadio2">
        Disabled Radio 2 (still enabled)
    </label>
</div>

Bootstrap Select Menus

A select menu is used when you want the user to choose an option from a dropdown list of values.

Basic Select Menu Example

Here is how you create a basic select menu:

<label for="basicSelect">Choose an option:</label>
<select class="form-control" id="basicSelect">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

Multiple Selection Example

If you allow multiple selections, add the multiple attribute:

<label for="multipleSelect">Choose multiple options:</label>
<select class="form-control" id="multipleSelect" multiple>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

Size Variations in Select Menus

To make the select menu larger or smaller, use .form-control-lg or .form-control-sm classes respectively:

<label for="largeSelect">Large select:</label>
<select class="form-control form-control-lg" id="largeSelect">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

<label for="smallSelect">Small select:</label>
<select class="form-control form-control-sm" id="smallSelect">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

Full Example Combining All Three

Below is a complete example combining checkboxes, radios, and select menus within a form block of Bootstrap:

Top 10 Interview Questions & Answers on Bootstrap Checkboxes, Radios, and Select Menus

1. How do I style a checkbox using Bootstrap?

Answer: Bootstrap provides default styling for checkboxes which follows its design principles but can be customized further by adding your own CSS classes or using utilities. For example:

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

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

Adding custom styles:

.form-check-input:checked {
  background-color: #your-color;
  border-color: #your-color;
}

2. Can you show me how to use inline checkboxes with Bootstrap?

Answer: Absolutely. Use the form-check-inline class to display checkboxes in the same line.

<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>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3. How do I create styled radio buttons in Bootstrap?

Answer: Similar to checkboxes, Bootstrap has a class structure for radio buttons that can be customized.

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Checked radio
  </label>
</div>

Like checkboxes, you can add custom styles:

.form-check-input:checked {
  background-color: #your-color;
  border-color: #your-color;
}

4. How can I make radio buttons appear in a row rather than stacked vertically?

Answer: Use the form-check-inline class for radio buttons as well, just like with checkboxes.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

5. What is the basic way to create a custom select menu using Bootstrap?

Answer: Customizing a select form control requires wrapping it in a div with a class such as form-group.

<div class="mb-3">
  <select class="form-select" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

6. How do I add multiple options in a select dropdown without holding the Ctrl key?

Answer: Bootstrap's default <select> element does not support multiple selections without pressing the Ctrl (or Cmd on Mac) key. However, for this functionality, you would need to either use the multiple attribute of a native <select> or integrate a JavaScript plugin like Select2 or Bootstrap Select.

Here's how you can use the multiple attribute:

<select class="form-select" multiple aria-label="multiple select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

7. Can I style the Bootstrap select menu to have a custom appearance?

Answer: You can apply additional CSS classes for custom styling, but often a plugin like Bootstrap Select or Select2 is used for extended customization options.

Using Bootstrap Select:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/css/bootstrap-select.min.css">

<select class="selectpicker" data-style="btn-primary">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/js/bootstrap-select.min.js"></script>

8. How do I create a select menu with optgroups in Bootstrap?

Answer: You can achieve this by simply nesting <optgroup> inside the <select> element.

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="broccoli">Broccoli</option>
  </optgroup>
</select>

9. Is there any way to disable options or groups in a select menu with Bootstrap?

Answer: Yes, you can disable individual <option> tags or <optgroup>.

<select class="form-select" aria-label="Disabled select example">
  <option selected>Open this select menu</option>
  <option value="1" disabled>Option 1 (disabled)</option>
  <option value="2">Option 2</option>
</select>

<select class="form-select" aria-label="Disabled select example">
  <option selected>Open this select menu</option>
  <optgroup label="Disabled group" disabled>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </optgroup>
  <optgroup label="Enabled group">
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </optgroup>
</select>

10. How can I validate select menus with Bootstrap?

Answer: Bootstrap has built-in validation features. To validate select menus, ensure they don't leave the first option open if a selection is required.

<div class="form-group">
  <label for="validationSelect">Choose one</label>
  <select class="form-select is-invalid" id="validationSelect" aria-describedby="validationSelectFeedback" required>
    <option selected disabled value="">Open this select menu...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div id="validationSelectFeedback" class="invalid-feedback">
    Please select one option.
  </div>
</div>

For automatic validation, you can enable it on forms by adding the novalidate attribute and handling the form submission via JavaScript: