This Bootstrap Input tutorial explains various types of Bootstrap 4 input options like file, radio button, dropdown, checkbox, custom, etc.:
In this tutorial, we have covered Bootstrap inputs, input sizes, file upload, range, textareas, select dropdowns, radio buttons, checkboxes, custom select dropdowns, custom select dropdown sizes, custom radio buttons, custom checkboxes, custom file upload, custom range, custom toggle switch and frequently asked questions (FAQs) of form inputs in detail.
Please note that we have used Bootstrap version 4 in all the examples.
=> Check Here To See A-Z Of Bootstrap Training Tutorials Here
Table of Contents:
Introduction To Bootstrap Input
There are several types of form controls as shown below.
- Basic inputs or <input>s,
- Select dropdowns or <select>s,
- Textareas or <textarea>s,
- Radio buttons or <input type=”radio”>s and
- Checkboxes or <input type=”checkbox”>s.
A form control allows a user to input data. However, the developer can restrict what kind of data (such as data size, data type, etc.) is allowed, by implementing validation according to the client’s needs.
In this tutorial, our main focus is on form inputs, not form validation. We will discuss form validation in our upcoming tutorial on Bootstrap 4 Forms.
The below table summarizes the classes of form inputs that we have used in this tutorial.
| Class | Usage |
|---|---|
| The .form-group class | This class is used for proper grouping of labels, controls, help text and form validation messages. |
| The .form-control class | This class is used to style form inputs with full width and appropriate padding. |
| The .form-control-sm class | This class is used to create a small input. |
| The .form-control-lg class | This class is used to create a large input. |
| The .form-check class | This class is used to create a radio button or checkbox. |
| The .form-check-input class | This class is used to create a radio button or checkbox. |
| The .form-check-label class | This class is used to create a label for a radio button or checkbox. |
| The .position-static class | This class is used to create a radio button or checkbox without a label. |
| The .form-check-inline class | This class is used to create an inline radio button or inline checkbox. |
| The .form-control-file class | This class is used to create a file upload. |
| The .form-control-range class | This class is used to create a range. |
Basic Bootstrap 4 Input – <input>s
Bootstrap 4 supports almost all the input types of HTML forms such as text, number, email, password, color, URL, date, time, month, week, and so on.
Follow the below steps to create a basic Bootstrap input.
- Wrap the <input> element (and the <label> element*) in a <div> element with the .form-group class. The .form-group class is used for proper grouping of labels, controls, help text and form validation messages.
- Add the .form-control class to the <input> element. It styles the <input> element with full width and appropriate padding.
*You may add labels to the <input> elements. If you are using the <label> element, then the value of the for attribute of the <label> element and the value of the id attribute of the <input> element should be the same. Please refer to the below section on “Examples of <input>s, <textarea> and <select>” for the example.
Input Sizes
There are three sizes of inputs as shown below.
- Small inputs
- Default size inputs
- Large inputs
Small Input: Add the .form-control-sm class to the <input type=”text”> element to create a small input. Please refer to the below section on “Examples of <input>s, <textarea> and <select>” for the example.
Default Size Input: There is no need to add a specific class for a default size input. Please refer to the below section on “Examples of <input>s, <textarea> and <select>” for the example.
Large Input: Add the .form-control-lg class to the <input type=”text”> element to create a large input. Please refer to the below section on “Examples of <input>s, <textarea> and <select>” for the example.
Bootstrap File Upload
Add the .form-control-file class to the <input type=”file”> element to create a file upload. Please refer to the below section on “Examples of <input>s, <textarea> and <select>” for the example.
Bootstrap Range
Add the .form-control-range class to the <input type=”range”> element to create a range. Please refer to the below section on “Examples of <input>s, <textarea> and <select>” for the example.
Bootstrap Textarea – <textarea>
Add the .form-control class to the <textarea> element for textareas. Please refer to the section on “Examples of <input>s, <textarea> and <select>” for an example of a textarea.
Bootstrap Select Dropdown – <select>
Add the .form-control class to the <select> element for select dropdowns. Please refer to the section on “Examples of <input>s, <textarea> and <select>” for an example of a select dropdown.
Examples Of <input>s, <textarea> And <select>
The below programming code shows examples of inputs, textarea and select dropdown.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="form-group"> <label for="user">Name:</label> <input type="text" class="form-control" id="user"> </div> <div class="form-group"> <label for="age">Age:</label> <input type="number" class="form-control" id="age"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <input type="text" class="form-control form-control-sm" id="smallInput" placeholder="Small Text Input"> </div> <div class="form-group"> <input type="text" class="form-control" id="defaultInput" placeholder="Default Text Input"> </div> <div class="form-group"> <input type="text" class="form-control form-control-lg" id="largeInput" placeholder="Large Text Input"> </div> <div class="form-group"> <label for="fileUpload">File Upload:</label> <input type="file" class="form-control-file border" id="fileUpload"> </div> <div class="form-group"> <label for="formRange">Range:</label> <input type="range" class="form-control-range" id="formRange"> </div> <div class="form-group"> <label for="address">Address:</label> <textarea class="form-control" id="address "></textarea> </div> <div class="form-group"> <label for="title">Title:</label> <select class="form-control" id="title"> <option value="mr.">Mr.</option> <option value="mrs.">Mrs.</option> <option value="miss">Miss</option> </select> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Bootstrap Radio Buttons – <input type=”radio”>s
Default Radio Buttons
Follow the below steps to create a default Bootstrap radio button.
- Wrap the <input type=”radio”> element and the <label> element in a <div> element with the .form-check class.
- Add the .form-check-input class to the <input type=”radio”> element.
- Add the .form-check-label class to the <label> element.
- The value of the for attribute of the <label> element and the value of the id attribute of the <input type=”radio”> element should be the same.
Please refer to the section “Examples of Radio Buttons and Checkboxes” for an example of default radio buttons.
Inline Radio Buttons: Add the .form-check-inline class to the <div> elements to arrange the radio buttons on the same line. Please refer to the section “Examples of Radio Buttons and Checkboxes” for an example of inline radio buttons.
Radio Buttons Without Labels: Add the .position-static class to the <input type=”radio”> elements for radio buttons which do not have labels. Please refer to the section “Examples of Radio Buttons and Checkboxes” for an example of radio buttons without labels.
Disabled Radio Buttons: Add the disabled attribute to the <input type=”radio”> element to disable a radio button. A disabled radio button appears in a lighter color and is also non-clickable. Please refer to the section “Examples of Radio Buttons and Checkboxes” for an example of a disabled radio button.
Bootstrap Checkboxes – <input type=”checkbox”>s
Default Checkboxes
Follow the below steps to create a default Bootstrap checkbox.
- Wrap the <input type=”checkbox”> element and the <label> element in a <div> element with the .form-check class.
- Add the .form-check-input class to the <input type=”checkbox”> element.
- Add the .form-check-label class to the <label> element.
- The value of the for the attribute of the <label> element and the value of the id attribute of the <input type=”checkbox”> element should be the same.
Please refer to the section “Examples of Radio Buttons and Checkboxes” for an example of default checkboxes.
Inline Checkboxes: Add the .form-check-inline class to the <div> elements to arrange the checkboxes on the same line. Please refer to the section “Examples of Radio Buttons and Checkboxes” for an example of inline checkboxes.
Checkboxes Without Labels: Add the .position-static class to the <input type=”checkbox”> elements for checkboxes which do not have labels. Please refer to the section “Examples of Radio Buttons and Checkboxes” for an example of checkboxes without labels.
Disabled Checkboxes: Add the disabled attribute to the <input type=”checkbox”> element to disable a checkbox. A disabled checkbox appears in a lighter color and is also non-clickable. Please refer to the section “Examples of Radio Buttons and Checkboxes” for an example of a disabled checkbox.
Examples Of Radio Buttons And Checkboxes
The below programming code shows examples of radio buttons and checkboxes.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <h6 class="text-primary">Default Radio Buttons</h6> <div class="form-check"> <input type="radio" class="form-check-input" id="asia" name="continent" Value=""> <label for="asia" class="form-check-label">Asia</label> </div> <div class="form-check"> <input type="radio" class="form-check-input" id="africa" name="continent" Value=""> <label for="africa" class="form-check-label">Africa</label> </div> <div class="form-check mb-3"> <input type="radio" class="form-check-input" id="europe" name="continent" Value="" disabled> <label for="europe" class="form-check-label">Europe (disabled)</label> </div> <h6 class="text-primary">Inline Radio Buttons</h6> <div class="form-check form-check-inline"> <input type="radio" class="form-check-input" id="male" name="gender" Value=""> <label for="male" class="form-check-label">Male</label> </div> <div class="form-check form-check-inline mb-3"> <input type="radio" class="form-check-input" id="female" name="gender" Value=""> <label for="female" class="form-check-label">Female</label> </div> <h6 class="text-primary">Radio Buttons without Labels</h6> <div class="form-check"> <input type="radio" class="form-check-input position-static" id="male2" name="gender2" Value=""> </div> <div class="form-check mb-3"> <input type="radio" class="form-check-input position-static" id="female2" name="gender2" Value=""> </div> <h6 class="text-primary">Default Checkboxes</h6> <div class="form-check"> <input type="checkbox" class="form-check-input" id="google" name="brand" Value=""> <label for="google" class="form-check-label">Google</label> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="microsoft" name="brand" Value=""> <label for="microsoft" class="form-check-label">Microsoft</label> </div> <div class="form-check mb-3"> <input type="checkbox" class="form-check-input" id="apple" name="brand" Value="" disabled> <label for="apple" class="form-check-label">Apple (disabled)</label> </div> <h6 class="text-primary">Inline Checkboxes</h6> <div class="form-check form-check-inline"> <input type="checkbox" class="form-check-input" id="toyota" name="car" Value=""> <label for="toyota" class="form-check-label">Toyota</label> </div> <div class="form-check form-check-inline mb-3"> <input type="checkbox" class="form-check-input" id="honda" name="car" Value=""> <label for="honda" class="form-check-label">Honda</label> </div> <h6 class="text-primary">Checkboxes without Labels</h6> <div class="form-check"> <input type="checkbox" class="form-check-input position-static" id="toyota2" name="car2" Value=""> </div> <div class="form-check"> <input type="checkbox" class="form-check-input position-static" id="honda2" name="car2" Value=""> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Bootstrap Custom Inputs
Bootstrap has customized form elements to replace browser defaults. It has customized form elements as shown below:
- Custom select dropdown
- Custom radio button
- Custom checkbox
- Custom file upload
- Custom range
- Custom toggle switch
TIP: You may compare custom form elements with browser defaults.
The table below summarizes the classes of custom inputs.
| Class | Usage |
|---|---|
| The .custom-select class | This class is used to create a custom select dropdown. |
| The .custom-select-sm class | This class is used to create a small custom select dropdown. |
| The .custom-select-lg class | This class is used to create a large custom select dropdown. |
| The .custom-control class | This class is used to create a custom radio button, custom checkbox and custom toggle switch. |
| The .custom-control-input class | This class is used to create a custom radio button, custom checkbox and custom toggle switch. |
| The .custom-control-label class | This class is used to create a label for a custom radio button, custom checkbox and custom toggle switch. |
| The .custom-radio class | This class is used to create a custom radio button. |
| The .custom-control-inline class | This class is used to arrange the radio buttons/checkboxes on the same line. |
| The .custom-checkbox class | This class is used to create a custom checkbox. |
| The .custom-file class | This class is used to create a custom file upload. |
| The .custom-file-input class | This class is used to create a custom file upload. |
| The .custom-file-label class | This class is used to create a label for a custom file upload. |
| The .custom-range class | This class is used to create a custom range. |
| The .custom-switch class | This class is used to create a custom switch. |
Custom Select Dropdowns And Sizes
Custom Select Dropdowns
Add the .custom-select class to the <select> element to create a custom select dropdown. Please refer to the section “Examples of Custom Inputs” for an example of a custom select dropdown.
Custom Select Dropdown Sizes
There are three sizes of custom select dropdowns as shown below.
- Small Select Dropdown – Add the .custom-select-sm class to the <select> element to create a small custom select dropdown.
- Default size Select Dropdown – No need to add a specific class for a default size custom select dropdown.
- Large Select Dropdown – Add the .custom-select-lg class to the <select> element to create a large custom select dropdown.
Custom Radio Buttons
Default Custom Radio Buttons
Follow the below steps to create a default custom radio button.
- Wrap an <input type=”radio”> element and a <label> element in a <div> element with the .custom-control class and the .custom-radio class.
- Add the .custom-control-input class to the <input type=”radio”> element.
- Add the .custom-control-label class to the <label> element.
- The value of the for attribute of the <label> element and the value of the id attribute of the <input type=”radio”> element should be the same.
Please refer to the section “Examples of Custom Inputs” for an example of default custom radio buttons.
Inline Custom Radio Buttons: Add the .custom-control-inline class to the <div> element to arrange the custom radio buttons on the same line.
Disabled Custom Radio Buttons: Add the disabled attribute to the <input> to disable a custom radio button. A disabled custom radio button appears in a lighter color and is also non-clickable.
Custom Checkboxes
Default Custom Checkboxes
Follow the below steps to create a default custom checkbox.
- Wrap an <input type=”checkbox”> element and a <label> element in a <div> element with the .custom-control class and the .custom-checkbox class.
- Add the .custom-control-input class to the <input type=”checkbox”> element.
- Add the .custom-control-label class to the <label> element.
- The value of the for attribute of the <label> element and the value of the id attribute of the <input type=”checkbox”> element should be the same.
Please refer to the section “Examples of Custom Inputs” for an example of a default custom checkbox.
Inline Custom Checkboxes: Add the .custom-control-inline class to the <div> element to arrange the custom checkboxes on the same line.
Disabled Custom Checkboxes: Add the disabled attribute to the <input> element to disable a custom checkbox. A disabled custom checkbox appears in a lighter color and is also non-clickable.
Custom File Upload
Follow the below steps to create a custom file upload.
- Wrap an <input type=”file”> element and a <label> element in a <div> element with the .custom-file class.
- Add the .custom-file-input class to the <input type=”file”> element.
- Add the .custom-file-label class to the <label> element.
- The value of the for attribute of the <label> element and the value of the id attribute of the <input type=”file”> element should be the same.
Please refer to the section “Examples of Custom Inputs” for an example of a custom file upload.
Custom Range
Add the .custom-range class to an <input type=”range”> element to create a custom range.
Please refer to the section “Examples of Custom Inputs” for an example of a custom range.
Custom Toggle Switch
Follow the below steps to create a custom toggle switch.
- Wrap an <input type=”checkbox”> element and a <label> element in a <div> element with the .custom-control class and the .custom-switch class.
- Add the .custom-control-input class to the <input type=”checkbox”> element.
- Add the .custom-control-label class to the <label> element.
- The value of the for attribute of the <label> element and the value of the id attribute of the <input type=”checkbox”> element should be the same.
Please refer to the section “Examples of Custom Inputs” for an example of a custom toggle switch.
Examples Of Custom Inputs
The below programming code shows examples of custom inputs.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <h6 class="text-primary">Custom Select Dropdown</h6> <select name="items" class="custom-select mb-3"> <option value="apple">Apple</option> <option value="samsung">Samsung</option> <option value="nokia">Nokia</option> </select> <h6 class="text-primary">Custom Radio Buttons</h6> <div class="custom-control custom-radio"> <input type="radio" id="agree" name="customRadioButton" class="custom-control-input"> <label for="agree" class="custom-control-label">Agree</label> </div> <div class="custom-control custom-radio mb-3"> <input type="radio" id="disagree" name="customRadioButton" class="custom-control-input"> <label for="disagree" class="custom-control-label">Disagree</label> </div> <h6 class="text-primary">Custom Checkbox</h6> <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customCheckbox" name="terms"> <label for="customCheckbox" class="custom-control-label">I Agree to Terms.</label> </div> <h6 class="text-primary">Custom File</h6> <div class="custom-file mb-3"> <input type="file" class="custom-file-input" id="customFile" name="file"> <label for="customFile" class="custom-file-label">Choose file</label> </div> <label for="customRange" class="text-primary">Custom Range</label> <input type="range" class="custom-range" id="customRange" name="score"> <h6 class="text-primary">Custom Toggle Switch</h6> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="customSwitch" name="switch"> <label for="customSwitch" class="custom-control-label">Toggle</label> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Frequently Asked Questions
In this section, we will look at some of the frequently asked questions about Bootstrap 4 inputs.
Q #1) What are the different kinds of form controls?
Answer: The different kinds of form controls are inputs, select dropdowns, textareas, radio buttons, and checkboxes.
Q #2) Which classes are used to create Bootstrap Radio Buttons and Checkboxes?
Answer: The classes used to create Bootstrap radio buttons and checkboxes are the .form-check class, the .form-check-input class and the .form-check-label class.
Q #3) Which class is used to create a small text input?
Answer: The .form-control-sm class is used to create a small text input.
Q #4) Which class is used to create a large text input?
Answer: The .form-control-lg class is used to create a large text input.
Q #5) Which class is used to create a file upload field?
Answer: The .form-control-file class is used to create a file upload field.
Q #6) Which class is used to create a form field for range?
Answer: The .form-control-range class is used to create a form field for range.
Q #7) What is the function of the .form-check-inline class?
Answer: The .form-check-inline class is used to arrange the radio buttons or checkboxes on the same line.
Q #8) Which attribute used to disable a radio button or a checkbox?
Answer: The disabled attribute is used to disable a radio button or a checkbox.
Q #9) Does Bootstrap 4 support custom form inputs?
Answer: Yes, it supports custom form inputs.
Q #10) Which classes are used to create a Custom Radio Button?
Answer: The classes used to create a custom radio button are the .custom-control class, the .custom-radio class, the .custom-control-input class and the .custom-control-label class.
Q #11) Which classes are used to create a Custom Checkbox?
Answer: The classes used to create a custom checkbox are the .custom-control class, the .custom-checkbox class, the .custom-control-input class and the .custom-control-label class.
Conclusion
Inputs are the key features of Bootstrap forms. There is a wide range of form inputs such as text inputs, textareas, select dropdowns, radio buttons, checkboxes, etc. Furthermore, you can also create custom inputs.
=> Visit Here For The Exclusive Bootstrap Training Series