Bootstrap 4 Forms

Bootstrap 4 forms provide styling and alignment of form control elements by providing predefined form classes. Labels, input fields, select boxes, text area, and buttons are the form control elements.

Bootstrap provides three type of form layout.

  1. Vertical Form
  2. Horizontal Form
  3. Inline Form

Creating Bootstrap Vertical Form Layout

  • Do not put any class inside <form> base class.
  • Put form label and input fields, selectbox, textrea inside the child class of <form> container having .form- group i.e( <div> having .form-group) while as put checkbox and radio button to the container having class .checkbox and .radio correspondingly.
  • Put form control label and input fields inside the child class of <form> container having .form- group i.e(<div> having .form-group).
  • Add .form-control to input fields, selectbox, textarea.

Note: Bootstrap creates alignment and styling of form controls. These form controls are like Labels, input fields, select boxes, text area, and buttons are the form control elements.

Example


Source Code

          <div class="container mt-4">
  <h2>Bootstrap Form</h2>
  <form action="" method="post">
    <div class="form-group">
      <label for="User Name">User Name</label>
      <input type="TEXT" class="form-control" id="username" name="user'" placeholder="User name" required />
    </div>
    <div class="radio">
      <label><input name="gender" type="radio" value="Male" />Male</label>
    </div>
    <div class="radio">
      <label><input name="gender" type="radio" value="Female" />Female</label>
    </div>
    <div class="form-group">
      <label for="userEmail">Email</label>
      <input type="email" class="form-control" id="userEmail" placeholder="User Email" required />
    </div>
    <div class="form-group">
      <label for="userPassword">Password</label>
      <input type="password" class="form-control" id="userPassword" placeholder="User Password" required />
    </div>
    <button type="button" class="btn btn-primary disabled">Login</button>
  </form>
</div>
<!--/container-->
        
Try it now

Source Code: Output

Bootstrap Form

Note: The form controls input fields,selectbox, textrea are placed inside the element having .form-group while as checkbox & radio are places inside the element having .checkbox & .radio respectively.

Bootstrap Horizontal Form Layout

  • Step1: Do not put any class inside <form> base class.
  • Step2A: Put form label and form controls(input fields,selectbox,textrea,checkbox,radio) inside the child class of <form> container having .form-group & .row i.e( <div> having .form-group .row ).Use col-*-* grid classes to specify the width of your labels and controls.
  • Step2B:The child element(<div> having class .form-group and .row) having labels and form controls i.e(input fields, textrea , selectbox), provide .col-form-label to labels and .form-control to form controls( input fields, selectbox ,textrea).
  • Step2C: Place checkbox and radio button inside label and provide .form-check-label to label base class.

General Syntax

      <form action="" method="post">
  <div class="form-group row">
    <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="Email" required />
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password" required />
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <button type="button" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
    
Try it now

Source Code

          <div class="container mt-4">
  <h2>Bootstrap Form</h2>
  <form action="" method="post">
    <div class="form-group row">
      <label for="inputUserName" class="col-sm-2 col-form-label">Name</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="inputUserName" placeholder="User Name" required />
      </div>
    </div>
    <div class="form-group row">
      <label for="inputUserName" class="col-sm-2 col-form-label">Gender</label>
      <div class="col-sm-10">
        <label class="form-check-label"> <input type="radio" value="male" name="gender" /> male</label>
        <label class="form-check-label"><input type="radio" name="gender" value="Female" /> Female</label>
      </div>
    </div>
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail" placeholder="Email" required />
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword" placeholder="Password" required />
      </div>
    </div>
    <div class="form-group row">
      <div class="col-sm-10 offset-sm-2">
        <button type="button" class="btn btn-primary">Sign in</button>
      </div>
    </div>
  </form>
</div>
<!--/container-->
        
Try it now

Source Code: Output

Bootstrap Form

Note: In the above example horizontal form layout concept is mentioned. Follow the given step and design horizontal form layout.

Bootstrap 4 Inline Form Layout

Bootstrap inline form display labels,form controls and button on a single horizontal row.

Step To Create Bootstrap Inline Form

  • Step 1: Assign .form-inline to <form> element base class for making inline form.
  • Step 2A: Put form label and form controls( input fields, select box, textarea ,checkbox, radio) inside the child class of
    container having .form-group i.e(<div> having .form-group ).
  • Step 2B: The child element(div having class .form-group) having labels and form controls i.e(input fields , textarea ,select box),provide .form-control to form controls(input fields,selectbox,textarea).
  • Step 2C: Place checkbox and radio button inside label.
  • Step 2D: Use flexbox margin utility class to provide left,right,top,bootm margin ,so that form label and form controls element will display elegant way.

General Syntax

      <form method="post" action="" class="form-inline">
  <div class="form-group mr-2">
    <label class="sr-only" for="inputEmail">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email" />
  </div>
  <div class="form-group mr-2">
    <label class="sr-only" for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password" />
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>
    
Try it now

Source Code

          <div class="container mt-4">
  <h2>Bootstrap Form</h2>
  <form class="form-inline">
    <div class="form-group mr-2">
      <label class="sr-only" for="inputEmail">Email</label>
      <input type="email" class="form-control" id="inputEmail" placeholder="Email" />
    </div>
    <div class="form-group mr-2">
      <label class="sr-only" for="inputPassword">Password</label>
      <input type="password" class="form-control" id="inputPassword" placeholder="Password" />
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>
        
Try it now

Source Code: Output

Bootstrap Form

Note: In the above example bootstrap inline form concept is used.It displays labels, form controls, and buttons on a single horizontal row.

Online Test / Quiz

Web Tutorials

Bootstrap 4 Forms
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4