Logo

Bootstrap 4 Inputs

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 

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form Input Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
 </head>
 <body>
   <div class="container">
   <h2>Form Input</h2>
   <form action="/action_page.php">
     <div class="form-group">
       <label for="usr">Email:</label>
       <input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
     </div>
     <div class="form-group">
       <label for="pwd">Password:</label>
       <input type="password" class="form-control" id="pwd" name="password" placeholder="Enter password"> 
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

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

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form Input Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head> 
 <body>
   <div class="container">
   <h2>Textarea</h2>
   <form action="/action_page.php">
     <div class="form-group">
       <label for="comment">Comment:</label>
       <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

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

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form Input Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head>
 <body>
   <div class="container">
   <h2>Checkboxes</h2>
   <form action="/action_page.php">
     <div class="form-check">
       <label class="form-check-label" for="check1"> 
         <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>Option 1
       </label>
     </div>
     <div class="form-check">
       <label class="form-check-label" for="check2">
         <input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">Option 2 
       </label>
     </div>
     <div class="form-check">
       <label class="form-check-label">
         <input type="checkbox" class="form-check-input" disabled>Option 3
       </label>
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

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

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form Input Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head>
 <body>
   <div class="container">
   <h2>Inline Checkboxes</h2>
   <form action="/action_page.php">
     <div class="form-check-inline">
       <label class="form-check-label" for="check1"> 
         <input type="checkbox" class="form-check-input" id="check1" name="vehicle1" value="something" checked>Option 1
       </label>
     </div>
     <div class="form-check-inline">
       <label class="form-check-label" for="check2">
         <input type="checkbox" class="form-check-input" id="check2" name="vehicle2" value="something">Option 2
       </label>
     </div>
     <div class="form-check-inline">
       <label class="form-check-label">
         <input type="checkbox" class="form-check-input" disabled>Option 3
       </label>
     </div> 
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

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

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form Input Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head>
 <body>
   <div class="container">
   <h2>Radio buttons</h2>
   <form action="/action_page.php"> 
     <div class="form-check">
       <label class="form-check-label" for="radio1">
         <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1
       </label>
     </div>
     <div class="form-check"> 
       <label class="form-check-label" for="radio2">
         <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2
       </label>
     </div>
     <div class="form-check">
       <label class="form-check-label">
         <input type="radio" class="form-check-input" disabled>Option 3
       </label>
     </div> 
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

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

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form Input Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> 
 </head>
 <body>
 <div class="container">
   <h2>Form control: select</h2>
   <form action="/action_page.php">
     <div class="form-group">
       <label for="sel1">Select list (select one):</label>
       <select class="form-control" id="sel1" name="sellist1"> 
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
       </select>
       <br>
       <label for="sel2">Mutiple select list (hold shift to select more than one):</label>
       <select multiple class="form-control" id="sel2" name="sellist2"> 
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
       </select>
     </div> 
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

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

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form Input Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head>
 <body>
 <div class="container">
   <h2>Form Control Sizing</h2>
   <form action="/action_page.php"> 
     <div class="form-group">
       <input type="text" class="form-control form-control-sm" placeholder="Small form control" name="text1">
     </div>
     <div class="form-group">
       <input type="text" class="form-control" placeholder="Default form control" name="text2">
     </div>
     <div class="form-group"> 
       <input type="text" class="form-control form-control-lg" placeholder="Large form control" name="text3">
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

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

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form Input Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head> 
 <body>
 <div class="container">
   <h2>Form Control Plain Text</h2>
   <form action="/action_page.php">
     <div class="form-group">
       <input type="text" class="form-control" placeholder="Default form control" name="text1">
     </div>
     <div class="form-group">
       <input type="text" class="form-control-plaintext" placeholder="Form control with plain text" name="text2">
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
   </form> 
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

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

<!DOCTYPE html>
 <html lang="en">
 <head>
   <title>Bootstrap Form Input Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 </head> 
 <body>
 <div class="container">
   <h2>Form Control Range and File</h2>
   <form action="/action_page.php">
     <div class="form-group">
       <input type="range" class="form-control-range" name="range"> 
     </div>
     <div class="form-group">
       <input type="file" class="form-control-file border" name="file">
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
 </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>

Output

Bootstrap 4 Inputs

Related Topics

Bootstrap 4 navbar

A navigation navbar or navbar uses in every website to make it more user-friendly. Navigating through the website is easier, and the user can instantly search for the topic of...

8 minutes read.

Bootstrap 4 Filters

 Bootstrap 4 Filters Bootstrap 4 provides a filter component that is used to search an element from a list, table, etc. Bootstrap does not contain any component or utility that helps...

5 minutes read.

Bootstrap Validation Example

Validation We can provide valuable and actionable feedback to the users through an HTML form validation. It happens via custom styles or behaviors of default browsers and JavaScript. How does validation work...

4 minutes read.

Bootstrap 4 Alerts

Bootstrap 4 Alerts Bootstrap 4 offers alerts that are used to provide feedback messages on the user’s actions. There is no boundation of text length in the alerts. Alerts can be created...

1 minute read.

Bootstrap 4 List Groups

Bootstrap 4 List Groups Bootstrap 4 offers List Group component, which is used to display a series of content in an organized way. The most common list group is an unordered...

13 minutes read.

Bootstrap Time Picker Example

What is a Bootstrap Time picker? It is used to display the time in hours, minutes and seconds from a dropdown menu. In this section, we will create an example to...

4 minutes read.

Bootstrap 4 Collapse

Bootstrap 4 Collapse Collapse is a bootstrap component that is similar to the dropdown button. Collapse is used to hide or show the content such as paragraphs, sentences, etc.  When we click on a...

4 minutes read.

Bootstrap 4 Utilities

Bootstrap 4 Utilities Bootstrap 4 utilities also known as helper classes that are used to add more style to the components. Utilities are used to make the website or webpage more stylish or elegant....

10 minutes read.

Bootstrap 4 Jumbotron

Bootstrap 4 Jumbotron Bootstrap offers Jumbotron, which is used to get more attention to specific content or information on the web page. It provides a gray background-color to the content to make that content...

2 minutes read.

Bootstrap Pager

← Prev Next → ...

1 minute read.

Bootstrap Images

Bootstrap 4 Images Bootstrap provides several classes for images to make them responsive and also helps to give some style to the images. Image Shapes Rounded Corners Bootstrap 4 offers .rounded class that makes the corners...

5 minutes read.

Bootstrap 4 Inputs

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...

10 minutes read.

Bootstrap Navigation bar

Navigation Bars In Bootstrap, We can create navigation bar like a navigation header. It is placed at the top of the page. We can collapse or extend it according to screen...

3 minutes read.

Bootstrap Searchable Dropdown Menu

Searchable Dropdown Menu When we click on the dropdown button/arrow in this dropdown menu, an input field will pop up with all the dropdown items listing inside. If we type in...

5 minutes read.

Bootstrap Notification Bubble

What is a notification bubble? Bubbles are built into the Notification system. They float on top of the website or the button to indicate pending notifications. Bubbles can be expanded to reveal...

5 minutes read.

Bootstrap 4 Layout

Containers Containers are the essential elements of the bootstrap layout. It is required when we are using a bootstrap grid system. Containers can also be nested, but most layouts do not need nested containers. Bootstrap has...

3 minutes read.

Bootstrap 4 Tutorial

What is Bootstrap? Bootstrap is a CSS (Cascading Style Sheets) framework, which is used to develop a responsive website. It is an open-source and mobile-first front-end framework. It has design templates that are based...

4 minutes read.

Dropdown & Dropup

Bootstrap Dropdowns The bootstrap dropdown menu is used to create a toggleable menu. It provides users to choose one value from a predefined list. Before creating dropdown menu, we have to know...

3 minutes read.

Bootstrap Buttons Groups

Bootstrap 4 Button Group Bootstrap 4 provides a feature button group that helps in creating a series of buttons together in a group. Basic Button Group  The .btn-group class is used within the <div> tag to create a...

6 minutes read.

Bootstrap Multiselect Dropdown

What is a multi-select Dropdown? Multi-select dropdown lists are used when we want to select multiple options for a particular record. Usually, dropdown lists provide the feature of choosing just one value...

4 minutes read.