Forms in Bootstrap 4

The HTML form is another specific component of a web page that helps in taking input from users and served it to the backend of the system. Though HTML allows users to create forms with the use of Bootstrap and Bootstrap classes, forms can be created with ease. Bootstrap makes use of extended classes in conjunction with HTML markup for making different elements of forms responsive and stylish. In this chapter, you will learn about the different classes and uses of Bootstrap within forms.

Form Layouts in Bootstrap

Form layouts help in creating an automatic global styling with the help of Bootstrap 4. All the components and elements such as <input>, <textarea>, and <select> having class ".form-control" will hold a width of 100%. It is of two types:

  • Inline form: Here, all the form elements will be in a single line, and the alignment will be left. The .form-inline class is used with the <form> for creating inline forms.
  • Stacked form: As the name suggests, it creates a stack structure of all the form elements.

Bootstrap Inline form


Example:
<form class = "form-inline" role = "form">
   <div class = "form-group">
      <input class = "form-control" type = "text" placeholder = "Name">
   </div>
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile"> Input: </label>
      <input type = "file" id = "inputfile">
   </div>
   <div class = "checkbox">
      <label> <input type = "checkbox"> Tick me </label>
   </div>
   <button type = "submit"> Submit </button>
</form>

Bootstrap Stacked form

Example:
<form role = "form">
   <div class = "form-group">
      <div class = "col-sm-8">
         <input class = "form-control" type = "text" placeholder = "First Name">
      </div>
   </div>
      <div class = "col-sm-8">
         <input class = "form-control" type = "text" placeholder = "Last Name">
      </div>
   </div>
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label> <input type = "checkbox"> Tick me </label>
         </div>
      </div>
   </div>
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-8">
         <button type = "submit"> Sign in </button>
      </div>
   </div>
</form>

The Different States of Form Control

Other than inputting values in forms with the use of focus state, Bootstrap also provides few additional styling features for different form validation states.

  • Input Focus: Bootstrap involves a particular style to input data in fields when they are focused. When the ": focus" is used, it applies a box shadow in its place.
  • Disabled Inputs: The input box can be disabled by simply using the disabled attribute on any input which will make the field gray and dimmed.
  • Disabled Fieldsets: All controls will be disabled that are under 'fieldset' by the use of the disabled attribute to <fieldset>. This will make the field gray and dimmed.
  • Validation States: The Bootstrap provides different ways of styling the input controls for implementing different validation states. Styles like success, warning as well error can be included within a form.


Example:
<form class="form-horizontal" role="form">

   <div class="form-group">
      <input class="form-control" type="text" value="The focused is used">
   </div>

   <div class="form-group">
      <input class="form-control" disabled="disabled" type="text" placeholder="Input Disabled">
   </div>

   <fieldset disabled="disabled">
      <div class="form-group">
         <label class="control-label" for="disabledTextInput">Fieldset disabled</label>
         <input id="disabledTextInput" class="form-control" type="text" placeholder="Disabled input">
      </div>

      <div class="form-group">
         <label class="control-label" for="disabledSelect">Disabled select menu (Fieldset disabled)</label>
         <select id="disabledSelect" class="form-control">
            <option>Selection Disabled</option>
         </select>
      </div>

   </fieldset>
   
</form>

Form Control Sizing

The size of forms and form elements can be witnessed and controlled using the classes like .input-lg and .col-lg-n (n is number like 2, 3, 4).



Example:
<input type="text" class="form-control form-control-lg" placeholder="Big size input">
<input type="text" class="form-control" placeholder="Default size input">
<input type="text" class="form-control form-control-sm" type="text" placeholder="Small size input">

Scroll Back to Top