Form Pickers

Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Example

Input Type Text

Using input type="text"

                    
<form>
  <div class="form-group">
      <input type="text" class="form-control" value="Name">
  </div>
</form>

Input Type Password

Using input type="password"

                    
<form>
  <div class="form-group">
      <input type="password" class="form-control" value="Name">
  </div>
</form>

Input Phone Number

Using input type="tel"

                    
<form>
  <div class="form-group">
      <input type="tel" class="form-control" value="1-(444)-444-4445">
  </div>
</form>

Input Type Email

Using input type="email"

                    
<form>
  <div class="form-group">
      <input type="email" class="form-control" value="abc@example.com">
  </div>
</form>

Input Type URL

Using input type="url"

                    
<form>
  <div class="form-group">
      <input type="url" class="form-control" value="http://google.com">
  </div>
</form>

Input Type Search

Using input type="search"

                    
<form>
  <div class="form-group">
      <input type="search" class="form-control" value="how to...">
  </div>
</form>

Input Type Numbers

Using input type="number"

                    
<form>
  <div class="form-group">
      <input type="number" class="form-control" value="6029">
  </div>
</form>

Input Type Date Time

Using input type="datetime-local"

                    
<form>
  <div class="form-group">
      <input type="datetime-local" class="form-control" value="2025-05-13T22:33:00">
  </div>
</form>

Input Type Date

Using input type="date"

                    
<form>
  <div class="form-group">
      <input type="date" class="form-control" value="2025-05-13">
  </div>
</form>

Input Type Time

Using input type="time"

                    
<form>
  <div class="form-group">
      <input type="time" class="form-control" value="22:33:00">
  </div>
</form>

Input Type Week

Using input type="week"

                    
<form>
  <div class="form-group">
      <input type="week" class="form-control" value="2025-W33">
  </div>
</form>

Input Type Month

Using input type="month"

                    
<form>
  <div class="form-group">
      <input type="month" class="form-control" value="2025-08">
  </div>
</form>

Textarea

                    
<form>
  <div class="form-group">
      <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

Input Type Color

Using input type="color"

                    
<form>
  <div class="form-group">
      <input type="color" class="form-control" value="#563d7c">
  </div>
</form>

Bootstrap Colorpicker

Use form-control-color classs for bootstrap colorpicker

                    
<form>
  <div class="form-group">
      <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
  </div>
</form>

Input Type Range

Using input type="range"

                    
<form>
  <div class="form-group">
      <input type="range" class="form-range" id="customRange1">
  </div>
</form>

Form Select

To use add .form-select class

                    
<form>
  <div class="form-group mb-4">
      <label class="mr-sm-2" for="inlineFormCustomSelect">Select</label>
      <select class="form-select mr-sm-2" id="inlineFormCustomSelect">
          <option selected>Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
      </select>
  </div>
</form>

File Upload

To use add .form-control-file class to the input

                    
<form>
  <input class="form-control" type="file" id="formFile">
</form>

Inline Checkbox

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

Inline Radio Button

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

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.

                    
<input class="form-control mb-2" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Consider using role="switch" to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the disabled attribute. 

                    
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switchCheckDefault">
  <label class="form-check-label" for="switchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switchCheckChecked" checked>
  <label class="form-check-label" for="switchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switchCheckDisabled" disabled>
  <label class="form-check-label" for="switchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="switchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Floating labels

Wrap a pair of <input class="form-control"> and elements in .form-floating to enable floating labels with Bootstrap’s textual form fields. A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~). 

                    
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>