Bootstrap Inputs

Bootstrap Form Inputs – Several pre-defined input types are available in HTML and Bootstrap. These input types help in styling the forms. When an input type is specified in the form, it means that the user will enter only the specific type of content/data. Otherwise, the error message or notification will be displayed on the screen.

Example – If the developer specifies an input “type=email” in an input field.  Then the user will need to enter a valid email address to that field. Otherwise, the error message or notification will be displayed on the screen.

There are many input types available in bootstrap, and these are text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Example

Output

Bootstrap 4 Inputs

Bootstrap Textarea – The textarea is a large text box that is used when you want to allow the user to enter multi-line text. You can also adjust the height of the text area by specifying the number of rows as per the requirement.

For specifying the rows of the textarea,

  • Add the row=”*” attribute to the <textarea> element for specifying the number of rows. Where* = 1,2,3……….. .. etc.

Example

Output

Bootstrap 4 Inputs

Bootstrap Checkboxes –  The checkbox is used when you want to allow the user to select more than one option from the given list. The user has to click on the box just before the list item to select the options.

Steps for creating checkboxes

  • Add the <div> element as a wrapper element with the .form-check class to provide proper margin to the labels and checkboxes.
  • Add the .form-check-label class to the <label> element.
  • Add .form-check-input class to the <input> element.

Example

Output

Bootstrap 4 Inputs

Inline Checkboxes – When you want the checkbox to appear horizontal (in a row) instead of vertical, then use the inline checkbox. To create an inline checkboxes you have to add the .form-check-inline class to the wrapper element.

Example

Output

Bootstrap 4 Inputs

Bootstrap Radio Buttons – Radio buttons are used when you want to restrict the user limit. The user can select only one option from the given list at the same time. The radio buttons are small circles that appear filled or highlighted when selected.

Note: The value of the name attribute in the <input> element will always be same when you create radio buttons.

You can also make the radio button disabled by adding disable property to the <input> element.

Example

Output

Bootstrap 4 Inputs

Bootstrap Select List – The bootstrap select list is similar to dropdowns. In dropdown, the list items are visible when you click on the caret/ arrow but in bootstrap select list, all the options are visible to the user. You can also select multiple options from the bootstrap select list by holding ctrl + shift and drag the mouse to the list items.

Example

Output

Bootstrap 4 Inputs

Form Control Sizing – Bootstrap offers some pre-defined classes that helps in customizing the height of input field. The .form-control-lg class is used to set the height of the input field larger (wide) than default height. The .form-control-sm class is used to set  the height of the input field smaller (narrow) than the default height. 

Example

Output

Bootstrap 4 Inputs

Form Control with Plain Text – The control with plain text is used when you want to add plain text and read only text. The .form-control-plaintext class is used when you want to remove the input field and make the text visible.

Example

Output

Bootstrap 4 Inputs

Form Control File and Range – You can provide the “file” feature  in the form that helps the user to upload any file or document. To create a file field, add the .form-control-file class and type=”file” attribute to the <input> element.

The range is used to specify an approx value instead of precise value.ult value of range slider is in between 0 to 100. To create a range, add the .form-control-range class with the type=”range” attribute to the <input> element.

Example

Output

Bootstrap 4 Inputs

Pin It on Pinterest

Share This