Best Bootstrap 4 Select Option

Best bootstrap 4 select option

Bootstrap 4 Form Inputs

❮ PreviousNext ❯


Supported Form Controls

Bootstrap supports the following form controls:

  • input
  • textarea
  • checkbox
  • radio
  • select

Bootstrap Input

Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Best bootstrap 4 select option

Note: Inputs will NOT be fully styled if their type is not properly declared!

The following example contains two input elements; one of and one of .

As we mentioned in the Forms chapter, we use the class to style inputs with full-width and proper padding, etc:

Example

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

Try it Yourself »

Bootstrap Textarea

The following example contains a textarea:

Example

<div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

Try it Yourself »


Bootstrap Checkboxes

Checkboxes are used if you want the user to select any number of options from a list of preset options.

The following example contains three checkboxes.

The last option is disabled:

Example

<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>

Try it Yourself »

Example explained

Use a wrapper element with to ensure proper margins for labels and checkboxes.

Add the class to label elements, and to style checkboxes properly inside the container.


Inline Checkboxes

Use the class if you want the checkboxes to appear on the same line:

Example

<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 1
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="">Option 2
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" value="" disabled>Option 3
  </label>
</div>

Try it Yourself »

Bootstrap Radio Buttons

Radio buttons are used if you want to limit the user to just one selection from a list of preset options.

The following example contains three radio buttons.

Custom Select using CSS only

The last option is disabled:

Example

<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
</div>
<div class="form-check disabled">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
</div>

Try it Yourself »

As with checkboxes, use the class if you want the radio buttons to appear on the same line:

Example

<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
</div>
<div class="form-check-inline disabled">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
</div>

Try it Yourself »

Bootstrap Select List


Select lists are used if you want to allow the user to pick from multiple options.

The following example contains a dropdown list (select list):

Example

<div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

Try it Yourself »

Form Control Sizing

Change the size of the form control with or :

Example

<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">

Try it Yourself »

Form Control with Plain Text

Use the if you want to style the input field as plain text:


Form Control File and Range

Add the class to or to to style a range control or a file field with full-width:

Example

<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">

Try it Yourself »

❮ PreviousNext ❯