Bootstrap 4 Form

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

Bootstrap provides three type of form layout.

Vertical Form
Horizontal Form
Inline Form

Creating Bootstrap Vertical Form Layout

Step1: Do not put any class inside <form> base class.
Step2: 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.
Step3: Put form control label and input fields inside the child class of <form> container having .form-group i.e(<div> having .form-group).
Step4: 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

	
		<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-info disabled">Login</button>
</form>

Try it yourself

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.

Example

Source Code

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

Try it yourself

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

Bootstrap 4 Inline Form Layout

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

Step To Create Bootstrap Inline Form

Step 1: Assign .form-inline to
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.

Source Code

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

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

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS