Bootstrap 4 Forms

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


Try it Now

Source Code

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

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap Form

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

General Syntax

Try it now

Source Code

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