Bootstrap 4 - Forms

The form element is used to collect input from user by using fields such as checkboxes, radio buttons, or text fields etc.
You can wrap labels and controls in a <div> element with class .form-group and add a class of .form-control to all textual <input>, <textarea>, and <select> elements.
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Basic Form</h2>
         <form>
            <div class = "form-group">
               <label for = "exampleInputEmail1">Email</label>
               <input type = "email" class = "form-control" 
                  id = "exampleInputEmail1" aria-describedby = "emailHelp" 
                  placeholder = "Enter your email">
            </div>
            
            <div class = "form-group">
               <label for = "exampleInputPassword1">Password</label>
                  <input type = "password" class = "form-control" 
                     id = "exampleInputPassword1" placeholder = "Enter your password">
            </div>
            
            <div class = "form-group form-check">
               <label class = "form-check-label" for = "exampleCheck1">
               <input type = "checkbox" class = "form-check-input" 
                  id = "exampleCheck1">Remember me
               </label>
            </div>
            <button type = "submit" class = "btn btn-primary">Sign In</button>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
Bootstrap natively supports the most common form controls such as input, textarea and select.
The following example demonstrates above supported form controls specified with .form-control class −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <form>
            <h4>Example Input</h4>
            <div class = "form-group">
               <input type = "email" class = "form-control" 
                  id = "exampleFormControlInput1" placeholder = "Enter your email">
            </div>
            
            <h4>Example Select</h4>
            <div class = "form-group">
               <select class = "form-control" id = "exampleFormControlSelect1">
                  <option>Select Option #1</option>
                  <option>Select Option #2</option>
                  <option>Select Option #3</option>
                  <option>Select Option #4</option>
                  <option>Select Option #5</option>
               </select>
            </div>
            
            <h4>Example Multiple Select</h4>
            <div class = "form-group">
               <select multiple class = "form-control" id = "exampleFormControlSelect2">
                  <option>Multiple Select #1</option>
                  <option>Multiple Select #2</option>
                  <option>Multiple Select #3</option>
                  <option>Multiple Select #4</option>
                  <option>Multiple Select #5</option>
               </select>
            </div>
            
            <h4>Example Textarea</h4>
            <div class = "form-group">
               <textarea class = "form-control" id = "exampleFormControlTextarea1" rows = "3"></textarea>
            </div>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
The input field can be displayed in large and small sizes by using .form-control-lg and .form-control-sm classes respectively. The readonly attribute is a boolean attribute, which makes input field as readonly and cannot be modified. You can put range for the inputs by using the .form-control-range class.
The following example demonstrates above types −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <form>
            <h2>Sizing</h2>
            <input class = "form-control form-control-lg" type = "text" 
               placeholder = "Large Input">
            <br>
            
            <input class = "form-control" type = "text" 
               placeholder = "Default Input">
            <br>
            
            <input class = "form-control form-control-sm" type = "text" 
               placeholder = "Small Input">
            <br>
            <br>
            
            <h2>Readonly</h2>
            <input class = "form-control" type = "text" 
               placeholder = "This is readonly text" readonly>
            <br>
            <br>
            
            <h2>Range Inputs</h2>
            <div class = "form-group">
               <input type = "range" class = "form-control-range" 
               id = "formControlRange">
            </div>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
You can create complex forms which require multiple columns by using .form-row class that specify the compact layout for column. The following example demonstrates this −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <form>
            <h2>Form Row</h2>
            <div class = "form-row">
               <div class = "form-group col-md-6">
                  <label for = "inputEmail4">First Name</label>
                  <input type = "text" class =" form-control" 
                     id = "inputEmail4" placeholder = "First Name">
               </div>
               
               <div class = "form-group col-md-6">
                  <label for = "inputPassword4">Last Name</label>
                  <input type = "text" class = "form-control" 
                     id = "inputPassword4" placeholder = "Last Name">
               </div>
            </div>
            
            <div class = "form-group">
               <label for = "inputAddress">Address</label>
               <input type = "text" class = "form-control" id = "inputAddress" 
                  placeholder = "Address">
            </div>
            
            <div class = "form-row">
               <div class = "form-group col-md-6">
                  <label for = "inputCity">City</label>
                  <input type = "text" class = "form-control" placeholder = "City" 
                     id = "inputCity">
               </div>
               
               <div class = "form-group col-md-4">
                  <label for = "inputState">State</label>
                  <select id = "inputState" class = "form-control">
                     <option selected disabled>Select State</option>
                     <option>State 1</option>
                     <option>State 1</option>
                  </select>
               </div>
               
               <div class = "form-group col-md-2">
                  <label for = "inputZip">Pin Code</label>
                  <input type = "text" class = "form-control" id = "inputZip" 
                     placeholder = "Pin Code">
               </div>
            </div>
            
            <div class = "form-group">
               <div class = "form-check">
                  <input class = "form-check-input" type = "checkbox" id = "gridCheck" >
                  <label class = "form-check-label" for = "gridCheck">
                     I Agree To Terms and Conditions
                  </label>
               </div>
            </div>
            <button type = "submit" class = "btn btn-primary">Submit</button>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
Create horizontal forms by adding the .row class to form groups. The width of labels and controls can be specified by using .col-*-* classes and add the .col-form-label class to your <label>, so that you can place form controls vertically centered.
The following example demonstrates this −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <form>
            <h2>Horizontal Forms</h2>
            <div class = "form-group row">
               <label for = "inputEmail3" class = "col-sm-2 col-form-label">First Name</label>
               <div class = "col-sm-10">
                  <input type = "text" class = "form-control" id = "inputEmail3" 
                     placeholder = "First Name">
               </div>
            </div>
            
            <div class = "form-group row">
               <label for = "inputPassword3" class = "col-sm-2 col-form-label">Last Name</label>
               <div class = "col-sm-10">
                  <input type = "text" class = "form-control" id = "inputPassword3" 
                     placeholder = "Last Name">
               </div>
            </div>
            
            <fieldset class = "form-group">
               <div class = "row">
                  <legend class = "col-form-label col-sm-2 pt-0">Radios</legend>
                  <div class = "col-sm-10">
                     <div class = "form-check">
                        <input class = "form-check-input" type = "radio" 
                           name = "gridRadios" id = "gridRadios1" value = "option1" checked>
                        <label class = "form-check-label" for = "gridRadios1">
                           Option 1
                        </label>
                     </div>
                     
                     <div class = "form-check">
                        <input class = "form-check-input" type = "radio" 
                           name = "gridRadios" id = "gridRadios2" value = "option2">
                        <label class = "form-check-label" for = "gridRadios2">
                           Option 2
                        </label>
                     </div>
                     
                     <div class = "form-check disabled">
                        <input class = "form-check-input" type = "radio" 
                           name = "gridRadios" id = "gridRadios3" value =" option3" disabled>
                        <label class = "form-check-label" for = "gridRadios3">
                           Option 3 (disabled)
                        </label>
                     </div>
                  </div>
               </div>
            </fieldset>
            
            <div class = "form-group row">
               <div class = "col-sm-2">Checkbox</div>
               <div class = "col-sm-10">
                  <div class = "form-check">
                     <input class = "form-check-input" type = "checkbox" 
                        id = "gridCheck1">
                     <label class = "form-check-label" for = "gridCheck1">
                        Option 1
                     </label>
                  </div>
                  
                  <div class = "form-check">
                     <input class = "form-check-input" type = "checkbox" id = "gridCheck2">
                     <label class = "form-check-label" for = "gridCheck1">
                        Option 2
                     </label>
                  </div>
               </div>
            </div>
            
            <div class = "form-group row">
               <div class = "col-sm-10">
                  <button type = "submit" class = "btn btn-primary">Submit</button>
               </div>
            </div>
            
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
You can create a form where all of the elements are inline, left aligned and labels are alongside, by adding the class .form-inline to the <form> tag.
The following example demonstrates displaying of form controls on a single horizontal row −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Inline Forms</h2>
         <form class = "form-inline" action = "/action_page.php">
            <label for = "email">Email : 
            <input type = "email" class = "form-control" id = "email" 
               placeholder = "Enter email" name =" email"></label>
            
            <label for = "pwd">Password :
            <input type = "password" class = "form-control" id = "pwd" 
               placeholder = "Enter password" name = "pswd"></label>
            
            <button type = "submit" class = "btn btn-primary">Sign In</button>
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
Use the disabled attribute to disable the form controls (blocks the user interactions on an input). You can enter text to the related fields by using .form-text class. The following example demonstrates this −
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Disabled Form</h2>
         <form>
            <fieldset disabled>
               <div class = "form-group">
                  <label for = "disabledTextInput">Name</label>
                  <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Name">
               </div>
               
               <div class = "form-group">
                  <label for = "disabledSelect">Select your option</label>
                  <select id = "disabledSelect" class = "form-control">
                     <option>Select</option>
                  </select>
               </div>
               
               <div class = "form-check">
                  <input class = "form-check-input" type = "checkbox" 
                     id = "disabledFieldsetCheck" disabled>
                  <label class = "form-check-label" for="disabledFieldsetCheck">
                     Remember Me
                  </label>
               </div>
               
               <button type = "submit" class = " btn btn-primary">Submit</button>
               <br>
               <br>
               
               <h2>Help Text</h2>
               <label for = "inputPassword5">Password</label>
               <input type = "password" id = "inputPassword5" class = "form-control" 
                  aria-describedby = "passwordHelpBlock">
               
               <small id = "passwordHelpBlock" class = "form-text text-muted">
                  Your password must be 6-10 characters long (This is help text).
               </small>
            </fieldset>
            
         </form>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

    26 Lectures 
     2 hours 

 Anadi Sharma

    54 Lectures 
     4.5 hours 

 Frahaan Hussain

    161 Lectures 
     14.5 hours 

 Eduonix Learning Solutions

    20 Lectures 
     4 hours 

 Azaz Patel

    15 Lectures 
     1.5 hours 

 Muhammad Ismail

    62 Lectures 
     8 hours 

 Yossef Ayman Zedan
 Print
 Add Notes
 Bookmark this page