Bootstrap 4 Form Inputs


Supported Form Control

Bootstrap supports all form controls.

Bootstrap Input

Bootstrap supports all types of input. They are: text, password, datetime, datetime-local, date, month, week and so on.Bootstrap style will not work if the type of inputs is not specified.To use it, you need to put the .form-control class inside the <input> element.

Example code

<form>
<input type="text" class="form-control mb-2" name="" placeholder="Enter your email">
<input type="password" class="form-control" name="" placeholder="Enter your password">
</form>

Bootstrap Textarea

To use the bootstrap style in the <textarea> element, you need to use the .form-control class. This is illustrated by the following example:

Example code

<form>
<div class="form-group">
<label for="desc">Description:</label>
<textarea class="form-control" rows="6"></textarea>
</div>
</form>

Bootstrap Checkboxes

You have already created some options but the user can choose from as many options as he needs. That is why the checkbox is used.To use the Bootstrap style checkbox, follow the steps below:

The following example shows some checkboxes-

Example code

<form>
<div class="form-group form-check">
<label class="form-check-label">
<input type="checkbox" name="" class="form-check-input"> Option 1
</label>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input type="checkbox" name="" class="form-check-input"> Option 2
</label>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input type="checkbox" name="" class="form-check-input" checked=""> Option 2
</label>
</div>
</form>

Bootstrap Radio Buttons

You have already created some options but you want the user to choose one of them. That is why the radio button is used..To use the Bootstrap style Radio button, follow the steps below:

The following example shows some radio buttons-

Example code

<form>
<div class="form-group form-check">
<label class="form-check-label">
<input type="radio" name="opt" class="form-check-input"> Option 1
</label>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input type="radio" name="opt" class="form-check-input"> Option 2
</label>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input type="radio" name="opt" class="form-check-input" checked=""> Option 2
</label>
</div>
</form>

Bootstrap Select

You have already created a list but the user can choose any one of them. That is why select is used.

The following example shows a select tag -

Example code

<form>
<div class="form-group">
<label>Select any one:</label>
<select class="form-control">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
</div>
</form>

Form Control Sizes

These two classes, .form-control-sm and .form-control-lg, are used to resize the form control in Bootstrap.

Example code

<form>
<div class="form-group">
<input type="text" class="form-control form-control-sm" placeholder="Small Sizes" name="">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Medium/Normal Sizes" name="">
</div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Large Sizes" name="">
</div>
</form>

Some Form Controls

Example code