Understanding and Using Bootstrap Input Types

HTML forms are for collecting user input data. Bootstrap input types are useful when collecting users' feedback, suggestions or organizing polls.

In this tutorial, we introduce each of these Bootstrap input possibilities, along with a few different styling options.

Bootstrap Input: Main Tips

• Using Bootstrap 4, you can create and improve form controls.
• You should make your page user-friendly by designing easy-to-read form controls.

Supported Types

You can choose from five Bootstrap form controls:

• input field
• radio
• checkbox
• textarea
• select

Input Fields And Textareas

For beginners, a Bootstrap input field is the simplest type of form controls. It provides a space to type characters and supports all HTML input types (DateTime, email, URL, and others).

<label for="searchterm">Search:</label>
<input type="text" placeholder="Enter search term" id="searchterm" class="form-control">

Note: keep in mind that the input field will not be styled unless the input type is properly specified.

If you wish to make input fields look like plain text, you can use .form-control-plaintext:

<input type="text" placeholder="Enter search term" id="searchterm" class="form-control-plaintext">

Bootstrap textarea form control is very similar in function but different in size. It is usually multiline and used for entering more text into the form.

In most cases, Bootstrap textareas are for comments or suggestions:

<label for="comment">Tell us about yourself:</label>
<textarea rows="4" id="about" class="form-control"></textarea>

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Radio And Select Buttons

Bootstrap radio buttons are for limiting the selection to one of the possible options. Each button represents a single option, and only one can be active at a time:

<div class="form-check">
     <label class="form-check-label">
         <input class="form-check-input" value="" type="radio">Radio button 1
     </label>
 </div>
 <div class="form-check">
     <label class="form-check-label">
         <input class="form-check-input" value="" type="radio">Radio button 2
     </label>
 </div>
 <div class="form-check">
     <label class="form-check-label">
         <input class="form-check-input" value="" type="radio" disabled>Radio button 3
     </label>
 </div>

You can also put radio buttons in one line using .radio-inline:

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

Bootstrap select form control looks like a dropdown menu rather than a set of buttons. In the example below, you can see four Bootstrap select buttons for the user to choose from:

<label for="selectsingle">Select a single option:</label>
<select id="selectsingle" class="form-control">
    <option>Selection</option>
</select>

Checkboxes

You can use Bootstrap checkboxes when one option is not enough. Users may select multiple options from a given set. In the example below, we have three Bootstrap checkboxes, and two of them are active:

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

Again, using checkbox-inline will position the boxes in one line instead of a stacked set:

<label class="checkbox-inline">
<input type="checkbox" value="">Answer 1</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Answer 2</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Answer 3</label>

Modifying Input Tools

Sometimes the usual look of a particular form control won't suit your website. You might need to change it's size, or the styling. Let's review a few available options.

To resize a particular Bootstrap form control, you can use .form-control-sm or .form-control-lg:

<input type="text" placeholder="Enter search term" id="searchterm" class="form-control-sm">
<input type="text" placeholder="Enter search term" id="searchterm" class="form-control">
<input type="text" placeholder="Enter search term" id="searchterm" class="form-control-lg">

To style a range control, add .form-control-range class to input type"range":

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

To modify a file field, add .form-control-file to input type"file":

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

Bootstrap Input: Summary

• Five different Bootstrap input tools are supported, and they all serve a slightly different function.
• Using various form controls makes the page attractive and dynamic.
• Bootstrap radio buttons, checkboxes and select options are useful for polls.