Bootstrap Inputs

Modern Bootstrap Form Inputs

This tutorial covers how to use various form input controls with Bootstrap 5, focusing on current best practices and responsive design.

Supported Form Controls

Bootstrap 5 enhances styling for a wide range of standard HTML5 form controls. Key supported controls include:

input (all HTML5 types: text, password, email, number, date, file, etc.)
textarea
checkbox
radio
select
range
floating labels (a new Bootstrap 5 feature)

Properly declaring the type attribute on your inputs (e.g., type="email") is crucial not only for Bootstrap styling but also for browser-native validation and user experience (e.g., displaying appropriate keyboards on mobile devices).

Bootstrap Input Fields

Bootstrap supports all HTML5 input types, such as: text, password, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Use the .form-control class for basic styling.

Note: For inputs to be fully styled and responsive, ensure they have the .form-control class and are typically wrapped in a <div> with margin utilities like mb-3 for spacing (replacing the older .form-group).

Name:



Password:

The following example demonstrates two common input fields: one for text and one for password, correctly structured for Bootstrap 5:

<form>
  <div class="mb-3">
    <label for="usrName" class="form-label">Name:</label>
    <input type="text" class="form-control" id="usrName" placeholder="Enter your name">
  </div>
  <div class="mb-3">
    <label for="usrPwd" class="form-label">Password:</label>
    <input type="password" class="form-control" id="usrPwd" placeholder="Enter your password">
  </div>
</form>

<!--
Common Pitfall: Forgetting the `for` attribute on labels or mismatching it with the input's `id` can break accessibility and functionality. Always ensure they match.
For more on accessible forms, visit: https://getbootstrap.com/docs/5.3/forms/overview/#accessibility
-->

Application Scenario: Input fields like these are fundamental for login forms, registration pages, and user profile settings.

Bootstrap Textarea

Comment:

For multi-line text input, use a <textarea> element with the .form-control class:

<form>
  <div class="mb-3">
    <label for="commentArea" class="form-label">Comment:</label>
    <textarea class="form-control" id="commentArea" rows="5" placeholder="Leave your comment here"></textarea>
  </div>
</form>

<!-- Tip: The `rows` attribute suggests the visible number of lines. Textareas are vertically resizable by default in most browsers. -->

Application Scenario: Textareas are ideal for feedback forms, product reviews, or any input requiring detailed text.

Bootstrap Checkboxes

Option 1

Option 2

Option 3 (disabled)

Checkboxes allow users to select zero or more options from a list. Bootstrap 5 uses a specific structure with .form-check, .form-check-input, and .form-check-label classes.

The following example contains three checkboxes. The last option is disabled:

<form>
  <div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" value="" id="checkOption1">
    <label class="form-check-label" for="checkOption1">
      Option 1
    </label>
  </div>
  <div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" value="" id="checkOption2" checked>
    <label class="form-check-label" for="checkOption2">
      Option 2 (pre-selected)
    </label>
  </div>
  <div class="form-check mb-2">
    <input class="form-check-input" type="checkbox" value="" id="checkOption3" disabled>
    <label class="form-check-label" for="checkOption3">
      Option 3 (disabled)
    </label>
  </div>
</form>

<!-- Best Practice: Each checkbox and its label should be wrapped in a `div.form-check`. The `id` on the input must match the `for` attribute on the label for accessibility. -->

To display checkboxes on the same line, wrap each .form-check element with a parent div and apply the .form-check-inline class to each .form-check div:

Option 1
Option 2
Option 3

<form>
  <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">Option 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">Option 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">Option 3 (disabled)</label>
  </div>
</form>

Bootstrap Radio Buttons

Option 1

Option 2

Option 3 (disabled)

Radio buttons limit the user to a single selection from a list. They share a similar structure to checkboxes, using .form-check, .form-check-input, and .form-check-label.

The following example shows three radio buttons. The last option is disabled. Note the use of the name attribute to group them:

<form>
  <div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="radioOptions" id="radioOption1" value="option1" checked>
    <label class="form-check-label" for="radioOption1">
      Option 1 (selected by default)
    </label>
  </div>
  <div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="radioOptions" id="radioOption2" value="option2">
    <label class="form-check-label" for="radioOption2">
      Option 2
    </label>
  </div>
  <div class="form-check mb-2">
    <input class="form-check-input" type="radio" name="radioOptions" id="radioOption3" value="option3" disabled>
    <label class="form-check-label" for="radioOption3">
      Option 3 (disabled)
    </label>
  </div>
</form>

<!-- Important: All radio buttons in a group must share the same `name` attribute to ensure only one can be selected. -->

For radio buttons on the same line, use the .form-check-inline class on each .form-check wrapper:

Option 1
Option 2
Option 3

<form>
  <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">Option 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">Option 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">Option 3 (disabled)</label>
  </div>
</form>

Application Scenario: Radio buttons are used for choices like gender selection, payment method options, or survey questions where only one answer is allowed.

Bootstrap Select List

Select list (select one):

1
2
3
4


Multiple select list (hold Ctrl/Cmd to select more than one):

1
2
3
4
5

Select lists (dropdowns) allow users to choose from multiple options. Use the .form-select class for Bootstrap’s custom-styled select menus.

The following example contains a standard single-choice dropdown list:

<form>
  <div class="mb-3">
    <label for="selectList1" class="form-label">Select list (single choice):</label>
    <select class="form-select" id="selectList1" aria-label="Default select example">
      <option selected>Open this select menu</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
    </select>
  </div>

  <div class="mb-3">
    <label for="selectListMultiple" class="form-label">Multiple select list:</label>
    <select class="form-select" id="selectListMultiple" multiple aria-label="Multiple select example">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
    </select>
    <div class="form-text">Hold Ctrl (Windows) or Cmd (Mac) to select multiple options.</div>
  </div>
</form>

<!-- Tip: For a more native look, you can still use `.form-control` on a `<select>`, but `.form-select` provides Bootstrap's custom styling. -->

Application Scenario: Select lists are useful for country selection, choosing categories, or any scenario with a predefined list of mutually exclusive options (or multiple if multiple attribute is used).