Home Tutorials Videos Q&A MCQ Shortcuts Exercises Appointment Login
Lesson 25 of 60 – Bootstrap Select & Checkboxes
42%

Bootstrap Select & Checkboxes

Bootstrap provides useful classes for styling select dropdowns, checkboxes, radio buttons, switches, and other selection controls. These controls are commonly used in registration forms, admission forms, surveys, settings pages, search forms, and user preferences.

Note: Bootstrap selection controls are based on standard HTML elements. Bootstrap provides classes that make them easier to style and organize.

1. What Are Selection Controls?

Selection controls allow users to choose one or more values from a set of available options.

Common selection controls include:

  • Select dropdowns
  • Multiple select boxes
  • Checkboxes
  • Radio buttons
  • Switches

The choice of control depends on whether the user should select one option, multiple options, or turn a setting on or off.

2. Basic Select

The .form-select class styles a standard HTML <select> element. 

<select class="form-select">

    <option selected>
    Select Course
    </option>

    <option>
    HTML
    </option>

    <option>
    CSS
    </option>

    <option>
    Python
    </option>

</select>

3. Select with Label

A select control should normally have a meaningful label so that users know what they are expected to choose. 

<label
class="form-label"
for="course">

Course

</label>

<select
class="form-select"
id="course">

    <option selected>
    Select Course
    </option>

    <option>
    HTML
    </option>

</select>

4. Selected Option

The selected attribute makes an option selected by default. 

<select class="form-select">

    <option>HTML</option>

    <option selected>
    Python
    </option>

    <option>
    JavaScript
    </option>

</select>

5. Disabled Select

The disabled attribute prevents users from interacting with the select control. 

<select
class="form-select"
disabled>

    <option>
    Select Course
    </option>

</select>

6. Multiple Select

The multiple attribute allows users to select more than one option. 

<select
class="form-select"
multiple>

    <option>
    HTML
    </option>

    <option>
    CSS
    </option>

    <option>
    JavaScript
    </option>

    <option>
    Python
    </option>

</select>

Multiple selections are useful when a user can choose several skills or categories.

7. Select Size

The size attribute can display several options at once. 

<select
class="form-select"
size="3">

    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
    <option>Python</option>

</select>

8. Large Select

Use .form-select-lg to create a larger select control. 

<select
class="form-select form-select-lg">

    <option>
    Large Select
    </option>

</select>

9. Small Select

Use .form-select-sm to create a smaller select control. 

<select
class="form-select form-select-sm">

    <option>
    Small Select
    </option>

</select>

10. Grouping Select Options

The HTML <optgroup> element can group related options inside a select control. 

<select class="form-select">

    <optgroup label="Frontend">

        <option>
        HTML
        </option>

        <option>
        CSS
        </option>

        <option>
        JavaScript
        </option>

    </optgroup>

    <optgroup label="Backend">

        <option>
        PHP
        </option>

        <option>
        Python
        </option>

    </optgroup>

</select>

11. Basic Checkbox

A checkbox allows users to select or deselect an option. 

<div class="form-check">

    <input
    class="form-check-input"
    type="checkbox"
    id="html">

    <label
    class="form-check-label"
    for="html">

    HTML

    </label>

</div>

12. Multiple Checkboxes

Multiple checkboxes allow users to select several independent options.

13. Checked Checkbox

Use the checked attribute to select a checkbox by default. 

<input
class="form-check-input"
type="checkbox"
checked>

14. Disabled Checkbox

The disabled attribute prevents interaction with a checkbox. 

<input
class="form-check-input"
type="checkbox"
disabled>

15. Checkbox with Terms and Conditions

Checkboxes are commonly used when users need to confirm terms and conditions. 

<div class="form-check">

    <input
    class="form-check-input"
    type="checkbox"
    id="terms"
    required>

    <label
    class="form-check-label"
    for="terms">

    I agree to the terms.

    </label>

</div>

16. Basic Radio Buttons

Radio buttons are used when the user should choose one option from a group. 

<div class="form-check">

    <input
    class="form-check-input"
    type="radio"
    name="gender"
    id="male">

    <label
    class="form-check-label"
    for="male">

    Male

    </label>

</div>

17. Radio Button Group

Radio buttons with the same name belong to the same group. This normally allows only one option to be selected. 

<input
type="radio"
name="course"
value="html">

<input
type="radio"
name="course"
value="python">

18. Checked Radio Button

The checked attribute can select a radio button by default. 

<input
class="form-check-input"
type="radio"
name="level"
checked>

19. Disabled Radio Button

A radio button can be disabled using the disabled attribute. 

<input
class="form-check-input"
type="radio"
disabled>

20. Switch Control

Bootstrap provides switch-style checkboxes using the .form-switch class. 

<div class="form-check form-switch">

    <input
    class="form-check-input"
    type="checkbox"
    id="switch">

    <label
    class="form-check-label"
    for="switch">

    Enable Notifications

    </label>

</div>

21. Checked Switch

Add checked to a switch when it should be enabled by default. 

<div class="form-check form-switch">

    <input
    class="form-check-input"
    type="checkbox"
    role="switch"
    checked>

    <label
    class="form-check-label">

    Dark Mode

    </label>

</div>

22. Disabled Switch

A switch can be disabled using the disabled attribute. 

<div class="form-check form-switch">

    <input
    class="form-check-input"
    type="checkbox"
    role="switch"
    disabled>

    <label
    class="form-check-label">

    Service Unavailable

    </label>

</div>

23. Inline Checkboxes

Use .form-check-inline when checkboxes should appear on the same line when there is enough space. 

<div class="form-check form-check-inline">

    <input
    class="form-check-input"
    type="checkbox"
    id="inlineHTML">

    <label
    class="form-check-label"
    for="inlineHTML">

    HTML

    </label>

</div>

24. Inline Radio Buttons

Radio buttons can also be displayed inline using .form-check-inline. 

<div class="form-check form-check-inline">

    <input
    class="form-check-input"
    type="radio"
    name="inlineLevel"
    id="inlineBeginner">

    <label
    class="form-check-label"
    for="inlineBeginner">

    Beginner

    </label>

</div>

25. Select with Form Grid

Select controls can be placed inside Bootstrap's responsive grid. 

<div class="row">

    <div class="col-md-6 mb-3">

        <label class="form-label">
        State
        </label>

        <select class="form-select">

            <option selected>
            Select State
            </option>

            <option>
            Bihar
            </option>

            <option>
            Delhi
            </option>

        </select>

    </div>

</div>

26. Select and Checkbox Form

Select controls and checkboxes can be combined in a single form.

Select your preferred learning mode:

27. Select, Radio and Checkbox Form

A practical form may use all three selection controls for different types of choices.

Select learning mode:

Additional options:

28. Practical Admission Selection Form

Here is a practical admission form using select, radio, checkbox, and switch controls.

Select gender:

Additional requirements:

29. Best Practices for Select and Checkbox Controls

Follow these practices when creating selection controls:

  • Always provide meaningful labels.
  • Use radio buttons when only one option should be selected.
  • Use checkboxes when multiple independent options can be selected.
  • Use a select when there are several options and space is limited.
  • Use a multiple select only when multiple selections are necessary.
  • Use selected carefully for default values.
  • Use disabled when an option is unavailable.
  • Use the same name for radio buttons in the same group.
  • Do not rely only on color to communicate selection or status.
  • Make sure selection controls work well on mobile devices.
Tip: Do not use radio buttons when users need to select multiple independent options. Use checkboxes instead.

30. Complete Select & Checkbox Example

This complete example combines select, radio buttons, checkboxes, switches, and Bootstrap grid classes. 

<form>

    <div class="row">

        <div class="col-md-6 mb-3">

            <label class="form-label">
            Course
            </label>

            <select
            class="form-select"
            required>

                <option selected disabled>
                Select Course
                </option>

                <option>
                HTML
                </option>

                <option>
                CSS
                </option>

                <option>
                JavaScript
                </option>

                <option>
                Python
                </option>

            </select>

        </div>


        <div class="col-md-6 mb-3">

            <label class="form-label">
            Learning Mode
            </label>

            <div class="form-check">

                <input
                class="form-check-input"
                type="radio"
                name="mode"
                id="online"
                required>

                <label
                class="form-check-label"
                for="online">

                Online

                </label>

            </div>

            <div class="form-check">

                <input
                class="form-check-input"
                type="radio"
                name="mode"
                id="offline">

                <label
                class="form-check-label"
                for="offline">

                Offline

                </label>

            </div>

        </div>


        <div class="col-12 mb-3">

            <label class="form-label">
            Additional Services
            </label>

            <div class="form-check">

                <input
                class="form-check-input"
                type="checkbox"
                id="notes">

                <label
                class="form-check-label"
                for="notes">

                Study Notes

                </label>

            </div>

            <div class="form-check">

                <input
                class="form-check-input"
                type="checkbox"
                id="certificate">

                <label
                class="form-check-label"
                for="certificate">

                Certificate

                </label>

            </div>

        </div>


        <div class="col-12 mb-3">

            <div class="form-check form-switch">

                <input
                class="form-check-input"
                type="checkbox"
                role="switch"
                id="updates">

                <label
                class="form-check-label"
                for="updates">

                Receive Updates

                </label>

            </div>

        </div>


        <div class="col-12">

            <button
            type="submit"
            class="btn btn-primary">

            Submit

            </button>

            <button
            type="reset"
            class="btn btn-secondary">

            Reset

            </button>

        </div>

    </div>

</form>

📌 Key Points

  • Use .form-select to style select dropdowns.
  • Use selected to choose an option by default.
  • Use multiple when several select options can be chosen.
  • Use .form-select-lg for a large select control.
  • Use .form-select-sm for a small select control.
  • Use <optgroup> to organize related select options.
  • Use .form-check for checkboxes and radio buttons.
  • Use checkboxes when multiple independent choices are possible.
  • Use radio buttons when only one option from a group should be selected.
  • Use the same name for radio buttons in the same group.
  • Use .form-check-inline for inline selection controls.
  • Use .form-switch for switch-style checkboxes.
  • Use checked for a selected checkbox or radio button by default.
  • Use disabled when a selection control should not be available.
  • Always provide meaningful labels and make controls accessible.

🧠 Quick Quiz

Question: Which Bootstrap class is used to style a standard select dropdown?




← Previous Next →