Post
Ask Question

How To Implement Forms In Bootstrap 4

Introduction

This article will demonstrate how you can use Bootstrap 4 classes for designing HTML 5 Form inputs. Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, URL, search, tel, and color. Be sure to use an appropriate type attribute on all inputs (e.g., email for the email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

To use Bootstrap 4 popover in your project, you need to have the following downloaded or cdn link scripts.

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  

Example for HTML5 inputs in Bootstrap 4

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Form</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4 class="text-uppercase text-center">HTML 5 form inputs in bootstrap 4</h4>  
  13.         <div class="card">  
  14.             <div class="card-header bg-danger text-white">  
  15.                 <h4 class="text-uppercase text-center">HTML 5 from inputs</h4>  
  16.             </div>  
  17.             <div class="card-body">  
  18.                 <form>  
  19.                     <div class="form-row">  
  20.                         <div class="col-md-6">  
  21.                             <label>First Name</label>  
  22.                             <input type="text" placeholder="First Name" class="form-control" />  
  23.                         </div>  
  24.                         <div class="col-md-6">  
  25.                             <label>Last Name</label>  
  26.                             <input type="text" placeholder="Last Name" class="form-control" />  
  27.                         </div>  
  28.                     </div>  
  29.                     <div class="form-row">  
  30.                         <div class="col-md-6">  
  31.                             <label>Date</label>  
  32.                             <input type="date" class="form-control" />  
  33.                         </div>  
  34.                         <div class="col-md-6">  
  35.                             <label>Time</label>  
  36.                             <input type="time" class="form-control" />  
  37.                         </div>  
  38.                     </div>  
  39.                     <div class="form-row">  
  40.                         <div class="col-md-6">  
  41.                             <label>Email Address</label>  
  42.                             <input type="email" class="form-control" placeholder="Enter Email Address" />  
  43.                         </div>  
  44.                         <div class="col-md-6">  
  45.                             <label>Mobile Number</label>  
  46.                             <input type="tel" pattern="^\d{10}$" placeholder="Enter Mobile Number" class="form-control" />  
  47.                         </div>  
  48.                     </div>  
  49.                     <div class="form-row">  
  50.                         <div class="col-md-6">  
  51.                             <label>Website</label>  
  52.                             <input type="url" placeholder="Enter Your Website" class="form-control" />  
  53.                         </div>  
  54.                         <div class="col-md-6">  
  55.                             <label>Password</label>  
  56.                             <input type="password" placeholder="Password" class="form-control" />  
  57.                         </div>  
  58.                     </div>  
  59.                     <div style="margin-top:15px;">  
  60.                         <button type="submit" class="btn btn-danger rounded-0">Cancel</button>  
  61.                         <button type="submit" class="btn btn-primary rounded-0">Submit</button>  
  62.                     </div>  
  63.                 </form>  
  64.             </div>  
  65.         </div>  
  66.     </div>  
  67. </body>  
  68. </html>  

Output

Forms In Bootstrap Output 

Example for textarea in Bootstrap 4

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>HTML Form</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4 class="text-uppercase text-center">HTML 5 textarea in bootstrap 4</h4>  
  13.         <div class="card">  
  14.             <div class="card-header bg-danger text-white">  
  15.                 <h4 class="text-uppercase text-center">HTML 5 from textarea</h4>  
  16.             </div>  
  17.             <div class="card-body">  
  18.                 <form>  
  19.                     <div class="form-row">  
  20.                        <label>Message</label>  
  21.                         <textarea rows="5" class="form-control"></textarea>  
  22.                     </div>  
  23.                     <div style="margin-top:15px;">  
  24.                         <button type="submit" class="btn btn-danger rounded-0">Cancel</button>  
  25.                         <button type="submit" class="btn btn-primary rounded-0">Submit</button>  
  26.                     </div>  
  27.                 </form>  
  28.             </div>  
  29.         </div>  
  30.     </div>  
  31. </body>  
  32. </html>  

Output

Forms In Bootstrap Output 

Example for checkbox in Bootstrap 4

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>HTML Form</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4 class="text-uppercase text-center">HTML 5 Checkbox in bootsrap 4</h4>  
  13.         <div class="card">  
  14.             <div class="card-header bg-danger text-white">  
  15.                 <h4 class="text-uppercase text-center">HTML 5 from Checkbox</h4>  
  16.             </div>  
  17.             <div class="card-body">  
  18.                 <form>  
  19.                     <h5>Programming Skills</h5>  
  20.                     <div class="form-check">  
  21.                         <label class="form-check-label" for="check1">  
  22.                             <input type="checkbox" class="form-check-input" id="check1" name="HTML5" value="1" checked>HTML5  
  23.                         </label>  
  24.                     </div>  
  25.                     <div class="form-check">  
  26.                         <label class="form-check-label" for="check2">  
  27.                             <input type="checkbox" class="form-check-input" id="check2" name="CSS3" value="2" checked>CSS3  
  28.                         </label>  
  29.                     </div>  
  30.                     <div class="form-check">  
  31.                         <label class="form-check-label" for="check3">  
  32.                             <input type="checkbox" class="form-check-input" id="check3" name="Bootstrap4" value="3" checked>Bootstrap 4  
  33.                         </label>  
  34.                     </div>  
  35.                     <div class="form-check">  
  36.                         <label class="form-check-label" for="check4">  
  37.                             <input type="checkbox" class="form-check-input" id="check4" name="JavaScript" value="4" checked>JavaScript  
  38.                         </label>  
  39.                     </div>  
  40.                     <div class="form-check">  
  41.                         <label class="form-check-label" for="check5">  
  42.                             <input type="checkbox" class="form-check-input" id="check5" name="JQuery" value="5" checked>JQuery  
  43.                         </label>  
  44.                     </div>  
  45.                     <h5>Programming Skills</h5>  
  46.                     <div class="form-check-inline">  
  47.                         <label class="form-check-label" for="check1">  
  48.                             <input type="checkbox" class="form-check-input" id="check1" name="HTML5" value="1" checked>HTML5  
  49.                         </label>  
  50.                     </div>  
  51.                     <div class="form-check-inline">  
  52.                         <label class="form-check-label" for="check2">  
  53.                             <input type="checkbox" class="form-check-input" id="check2" name="CSS3" value="2" checked>CSS3  
  54.                         </label>  
  55.                     </div>  
  56.                     <div class="form-check-inline">  
  57.                         <label class="form-check-label" for="check3">  
  58.                             <input type="checkbox" class="form-check-input" id="check3" name="Bootstrap4" value="3" checked>Bootstrap 4  
  59.                         </label>  
  60.                     </div>  
  61.                     <div class="form-check-inline">  
  62.                         <label class="form-check-label" for="check4">  
  63.                             <input type="checkbox" class="form-check-input" id="check4" name="JavaScript" value="4" checked>JavaScript  
  64.                         </label>  
  65.                     </div>  
  66.                     <div class="form-check-inline">  
  67.                         <label class="form-check-label" for="check5">  
  68.                             <input type="checkbox" class="form-check-input" id="check5" name="JQuery" value="5" checked>JQuery  
  69.                         </label>  
  70.                     </div>  
  71.                     <h5>Programming Skills</h5>  
  72.                     <div class="form-check-inline">  
  73.                         <div class="custom-control custom-checkbox">  
  74.                             <input type="checkbox" class="custom-control-input" id="customCheck1">  
  75.                             <label class="custom-control-label" for="customCheck1">HTML5</label>  
  76.                         </div>  
  77.                     </div>  
  78.                     <div class="form-check-inline">  
  79.                         <div class="custom-control custom-checkbox">  
  80.                             <input type="checkbox" class="custom-control-input" id="customCheck2">  
  81.                             <label class="custom-control-label" for="customCheck2">CSS3</label>  
  82.                         </div>  
  83.                     </div>  
  84.                     <div class="form-check-inline">  
  85.                         <div class="custom-control custom-checkbox">  
  86.                             <input type="checkbox" class="custom-control-input" id="customCheck3">  
  87.                             <label class="custom-control-label" for="customCheck3">Bootstrap 4</label>  
  88.                         </div>  
  89.                     </div>  
  90.                     <div class="form-check-inline">  
  91.                         <div class="custom-control custom-checkbox">  
  92.                             <input type="checkbox" class="custom-control-input" id="customCheck4">  
  93.                             <label class="custom-control-label" for="customCheck4">JavaScript</label>  
  94.                         </div>  
  95.                     </div>  
  96.                     <div class="form-check-inline">  
  97.                         <div class="custom-control custom-checkbox">  
  98.                             <input type="checkbox" class="custom-control-input" id="customCheck5">  
  99.                             <label class="custom-control-label" for="customCheck5">JQuery</label>  
  100.                         </div>  
  101.                     </div>  
  102.                     <div style="margin-top:15px;">  
  103.                         <button type="submit" class="btn btn-danger rounded-0">Cancel</button>  
  104.                         <button type="submit" class="btn btn-primary rounded-0">Submit</button>  
  105.                     </div>  
  106.                 </form>  
  107.             </div>  
  108.         </div>  
  109.     </div>  
  110. </body>  
  111. </html>  

Output

Forms In Bootstrap Output 

Example for Radio Button in Bootstrap 4

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Radio Button</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4 class="text-uppercase text-center">HTML 5 Radio Button in bootsrap 4</h4>  
  13.         <div class="card">  
  14.             <div class="card-header bg-danger text-white">  
  15.                 <h4 class="text-uppercase text-center">HTML 5 from Radio Button</h4>  
  16.             </div>  
  17.             <div class="card-body">  
  18.                 <form>  
  19.                     <h5>Programming Skills</h5>  
  20.                     <div class="form-check">  
  21.                         <label class="form-check-label">  
  22.                             <input type="radio" id="radio1" class="form-check-input" name="radio1">HTML5  
  23.                         </label>  
  24.                     </div>  
  25.                     <div class="form-check">  
  26.                         <label class="form-check-label">  
  27.                             <input type="radio" id="radio2" class="form-check-input" name="radio2">CSS3  
  28.                         </label>  
  29.                     </div>  
  30.                     <div class="form-check">  
  31.                         <label class="form-check-label">  
  32.                             <input type="radio" id="radio3" class="form-check-input" name="radio3">Bootstrap 4  
  33.                         </label>  
  34.                     </div>  
  35.                     <div class="form-check">  
  36.                         <label class="form-check-label">  
  37.                             <input type="radio" id="radio4" class="form-check-input" name="radio4">JavaScript  
  38.                         </label>  
  39.                     </div>  
  40.                     <div class="form-check">  
  41.                         <label class="form-check-label">  
  42.                             <input type="radio" id="radio5" class="form-check-input" name="radio5">JQuery  
  43.                         </label>  
  44.                     </div>  
  45.                     <h5>Programming Skills</h5>  
  46.                     <div class="form-check-inline">  
  47.                         <label class="form-check-label">  
  48.                             <input type="radio" id="radio6" class="form-check-input" name="radio6">HTML5  
  49.                         </label>  
  50.                     </div>  
  51.                     <div class="form-check-inline">  
  52.                         <label class="form-check-label">  
  53.                             <input type="radio" id="radio7" class="form-check-input" name="radio7">CSS3  
  54.                         </label>  
  55.                     </div>  
  56.                     <div class="form-check-inline">  
  57.                         <label class="form-check-label">  
  58.                             <input type="radio" id="radio8" class="form-check-input" name="radio8">Bootstrap 4  
  59.                         </label>  
  60.                     </div>  
  61.                     <div class="form-check-inline">  
  62.                         <label class="form-check-label">  
  63.                             <input type="radio" id="radio9" class="form-check-input" name="radio9">JavaScript  
  64.                         </label>  
  65.                     </div>  
  66.                     <div class="form-check-inline">  
  67.                         <label class="form-check-label">  
  68.                             <input type="radio" id="radio10" class="form-check-input" name="radio10">JQuery  
  69.                         </label>  
  70.                     </div>  
  71.                     <h5>Programming Skills</h5>  
  72.                     <div class="form-check-inline">  
  73.                         <div class="custom-control custom-radio">  
  74.                             <input type="radio" id="customRadio1" name="customRadio1" class="custom-control-input">  
  75.                             <label class="custom-control-label" for="customRadio1">HTML5</label>  
  76.                         </div>  
  77.                     </div>  
  78.                     <div class="form-check-inline">  
  79.                         <div class="custom-control custom-radio">  
  80.                             <input type="radio" id="customRadio2" name="customRadio2" class="custom-control-input">  
  81.                             <label class="custom-control-label" for="customRadio2">CSS3</label>  
  82.                         </div>  
  83.                     </div>  
  84.                     <div class="form-check-inline">  
  85.                         <div class="custom-control custom-radio">  
  86.                             <input type="radio" id="customRadio3" name="customRadio3" class="custom-control-input">  
  87.                             <label class="custom-control-label" for="customRadio3">Bootstrap 4</label>  
  88.                         </div>  
  89.                     </div>  
  90.                     <div class="form-check-inline">  
  91.                         <div class="custom-control custom-radio">  
  92.                             <input type="radio" id="customRadio4" name="customRadio4" class="custom-control-input">  
  93.                             <label class="custom-control-label" for="customRadio4">JavaScript</label>  
  94.                         </div>  
  95.                     </div>  
  96.                     <div class="form-check-inline">  
  97.                         <div class="custom-control custom-radio">  
  98.                             <input type="radio" id="customRadio5" name="customRadio5" class="custom-control-input">  
  99.                             <label class="custom-control-label" for="customRadio5">JQuery</label>  
  100.                         </div>  
  101.                     </div>  
  102.                     <div style="margin-top:15px;">  
  103.                         <button type="submit" class="btn btn-danger rounded-0">Cancel</button>  
  104.                         <button type="submit" class="btn btn-primary rounded-0">Submit</button>  
  105.                     </div>  
  106.                 </form>  
  107.             </div>  
  108.         </div>  
  109.     </div>  
  110. </body>  
  111. </html>  

Output

Forms In Bootstrap Output 

Example for Select List in Bootstrap 4

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4 class="text-uppercase text-center">HTML5 Select in bootstrap 4</h4>  
  13.         <div class="card">  
  14.             <div class="card-header bg-danger text-white">  
  15.                 <h4 class="text-uppercase text-center">HTML 5 from Select</h4>  
  16.             </div>  
  17.             <div class="card-body">  
  18.                 <form>  
  19.                     <div class="form-row">  
  20.                         <label>Programing Skill</label>  
  21.                         <select class="form-control" id="dropdownlist1" name="dropdownlist1">  
  22.                             <option value="-1">Choose Skill</option>  
  23.                             <option value="1">HTML5</option>  
  24.                             <option value="2">CSS3</option>  
  25.                             <option value="3">Bootstrap 4</option>  
  26.                             <option value="4">JavaScript</option>  
  27.                             <option value="5">JQuery</option>  
  28.                         </select>  
  29.                     </div>  
  30.                     <div class="form-row">  
  31.                         <strong>Mutiple select list (hold shift to select more than one):</strong>  
  32.                         <select multiple class="form-control" id="dropdownlist2" name="dropdownlist1">  
  33.                             <option value="1">HTML5</option>  
  34.                             <option value="2">CSS3</option>  
  35.                             <option value="3">Bootstrap 4</option>  
  36.                             <option value="4">JavaScript</option>  
  37.                             <option value="5">JQuery</option>  
  38.                         </select>  
  39.                     </div>  
  40.                     <div class="form-row">  
  41.                         <label>Programing Skill</label>  
  42.                         <select class="custom-select" id="dropdownlist3" name="dropdownlist3">  
  43.                             <option value="-1">Choose Skill</option>  
  44.                             <option value="1">HTML5</option>  
  45.                             <option value="2">CSS3</option>  
  46.                             <option value="3">Bootstrap 4</option>  
  47.                             <option value="4">JavaScript</option>  
  48.                             <option value="5">JQuery</option>  
  49.                         </select>  
  50.                     </div>  
  51.                     <div style="margin-top:15px;">  
  52.                         <button type="submit" class="btn btn-danger rounded-0">Cancel</button>  
  53.                         <button type="submit" class="btn btn-primary rounded-0">Submit</button>  
  54.                     </div>  
  55.                 </form>  
  56.             </div>  
  57.         </div>  
  58.     </div>  
  59. </body>  
  60. </html>  

Output

Forms In Bootstrap Output 
 Example for File Upload in Bootstrap 4
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>FileUpload</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4 class="text-uppercase text-center">HTML5 File Upload in bootstrap 4</h4>  
  13.         <div class="card">  
  14.             <div class="card-header bg-danger text-white">  
  15.                 <h4 class="text-uppercase text-center">HTML 5 File Upload</h4>  
  16.             </div>  
  17.             <div class="card-body">  
  18.                 <form>  
  19.                     <div class="form-row">  
  20.                         <label for="file">Choose File</label>  
  21.                         <input type="file" class="form-control-file border" />  
  22.                     </div>  
  23.                     <div class="form-row">  
  24.                         <label>Choose File</label>  
  25.                         <div class="custom-file">  
  26.                             <input type="file" class="custom-file-input" />  
  27.                             <label class="custom-file-label" for="customFile"></label>  
  28.                         </div>  
  29.                     </div>  
  30.                     <div style="margin-top:15px;">  
  31.                         <button type="submit" class="btn btn-danger rounded-0">Cancel</button>  
  32.                         <button type="submit" class="btn btn-primary rounded-0">Submit</button>  
  33.                     </div>  
  34.                 </form>  
  35.             </div>  
  36.         </div>  
  37.     </div>  
  38. </body>  
  39. </html>  

Output

Forms In Bootstrap Output 

Example for Range Slider in Bootstrap 4

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>RangeSlider</title>  
  5.     <meta charset="utf-8" />  
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  8.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>  
  9. </head>  
  10. <body>  
  11.     <div class="container py-5">  
  12.         <h4 class="text-uppercase text-center">HTML5 Range Slider in bootstrap 4</h4>  
  13.         <div class="card">  
  14.             <div class="card-header bg-danger text-white">  
  15.                 <h4 class="text-uppercase text-center">HTML 5 Range SliderFile</h4>  
  16.             </div>  
  17.             <div class="card-body">  
  18.                 <form>  
  19.                     <div class="form-row">  
  20.                         <label for="range">Choose Range</label>  
  21.                         <input type="range" name="range" class="form-control-range">  
  22.                         
  23.                     </div>  
  24.                     <div class="form-row">  
  25.                         <label for="customRange">Choose Range</label>  
  26.                         <input type="range" class="custom-range" id="customRange" name="customRange">  
  27.                     </div>  
  28.                     <div style="margin-top:15px;">  
  29.                         <button type="submit" class="btn btn-danger rounded-0">Cancel</button>  
  30.                         <button type="submit" class="btn btn-primary rounded-0">Submit</button>  
  31.                     </div>  
  32.                 </form>  
  33.             </div>  
  34.         </div>  
  35.     </div>  
  36. </body>  
  37. </html>  

Output

Forms In Bootstrap Output 


Similar Articles