Bootstrap Forms group – Examples & Tutorials

Today, We want to share with you form group bootstrap.In this post we will show you bootstrap form validation, hear for bootstrap form template free download we will give you demo and example for implement.In this post, we will learn about bootstrap 3 input-group with an example.

bootstrap form group with form-control

There are the Following The simple About bootstrap form design Full Information With Example and source code.

As I will cover this Post with live Working example to develop bootstrap contact form, so the bootstrap form-control width is used for this example is following below.

Bootstrap Form Layouts group provides there are main 3 types of form layouts:

  • Horizontal form
  • Inline form
  • Vertical form

Example 1: bootstrap-form-group

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <div class="form-group">
        <label for="fname">First Name</label>
        <input id="fname" class="form-control" type="text">
      </div>
    </div>
    <div class="col-xs-12  col-sm-8 col-md-6 col-lg-4">
      <div class="form-group">
        <label for="lname">Last Name</label>
        <input id="lname" class="form-control" type="text">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <label for="address1">Address</label>
      <input id="address1" class="form-control" type="text">
    </div>
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <label for="address2">PO Box - Apt - Suite</label>
      <input id="address2" class="form-control" type="text">
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <label for="city">City</label>
      <input id="city" class="form-control" type="text">
    </div>
    <div class="col-xs-12 col-sm-8 col-md-1 col-lg-1">
      <label for="state">State</label>
      <input id="state" class="form-control" type="text">
    </div>
    <div class="col-xs-12 col-sm-8 col-md-3 col-lg-3">
      <label for="state">Zip</label>
      <input id="state" class="form-control" type="text">
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <div class="form-group">
        <label for="email">Email</label>
        <input id="email" class="form-control" type="email">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <div class="form-group">
        <label for="long">A Long Descriptive Label</label>
        <input id="long" class="form-control" type="text">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <table class="table tabl-hover table-condensed">
        <thead>
          <tr>
            <th class="col-sm-2 col-md-1">Date</th>
            <th class="col-sm-4 col-md-3">Item</th>
            <th class="hidden-sm col-md-1">Qty</th>
            <th class="hidden-sm col-md-1">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="col-sm-2 col-md-1">3/23/2016</td>
            <td class="col-sm-4 col-md-3">Widget A</td>
            <td class="hidden-sm col-md-1">1</td>
            <td class="hidden-sm col-md-1">3,200.00</td>
          </tr>
          <tr>
            <td class="col-sm-2 col-md-1">3/23/2016</td>
            <td class="col-sm-4 col-md-3">Widget X with extra extra extra extra extra extra extra extra extra extra extra extra long name</td>
            <td class="hidden-sm col-md-1">1</td>
            <td class="hidden-sm col-md-1">3,200.00</td>
          </tr>
          <tr>
            <td class="col-sm-2 col-md-1">4/16/2016</td>
            <td class="col-sm-4 col-md-3">Widget B</td>
            <td class="hidden-sm col-md-1">1</td>
            <td class="hidden-sm col-md-1">4,200.00</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Example 2: Bootstrap form layout

HTML Code

<form>
  <div class="col-md-8">
    <div class="panel panel-default">
      <div class="panel-heading">
        Personal Information
      </div>
      <div class="panel-body">
        <div class="form-group form-group-inline">
          <label class="label-block">First Name</Label>
          <input class="form-control form-control-inline form-control-medium" placeholder="First Name" />
        </div>
        <div class="form-group form-group-inline">
          <label class="label-block">MI</Label>
          <input class="form-control form-control-inline form-control-small" placeholder="MI" />
        </div>
        <div class="form-group form-group-inline">
          <label class="label-block">Last Name</label>
          <input class="form-control form-control-inline" placeholder="Last Name" />
        </div>
        
        <div class="form-group">
          <label class="label-block">Address</label>
          <input class="form-control form-control-inline form-control-large" />
          <input class="form-control form-control-large" />
        </div>

        
      </div>
    </div>
  </div>


  <div class="col-md-3">
    <div class="panel panel-primary">
      <div class="panel-heading">
        Payment Information
      </div>
      <div class="panel-body">

      </div>
    </div>
  </div>

</form>

CSS Code

.form-group-inline {
  display: inline-block;
}

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
    margin-left: 5px;
}

.form-control-small {
  min-width: 40px;
  max-width: 50px;
}

.form-control-medium {
  min-width: 200px;
  max-width: 250px;
}

.form-control-large {
  min-width: 400px;
  max-width: 500px;
}
.label-block {
  display: block;
  margin-left: 5px;
}

Example 3: Bootstrap Form Template

<div class="container">
  <form>
    <h2>Contact Us</h2>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="first">First Name</label>
          <input type="text" class="form-control" placeholder="" id="first">
        </div>
      </div>
      <!--  col-md-6   -->

      <div class="col-md-6">
        <div class="form-group">
          <label for="last">Last Name</label>
          <input type="text" class="form-control" placeholder="" id="last">
        </div>
      </div>
      <!--  col-md-6   -->
    </div>


    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="company">Company</label>
          <input type="text" class="form-control" placeholder="" id="company">
        </div>


      </div>
      <!--  col-md-6   -->

      <div class="col-md-6">

        <div class="form-group">
          <label for="phone">Phone Number</label>
          <input type="tel" class="form-control" id="phone" placeholder="phone">
        </div>
      </div>
      <!--  col-md-6   -->
    </div>
    <!--  row   -->


    <div class="row">
      <div class="col-md-6">

        <div class="form-group">
          <label for="email">Email address</label>
          <input type="email" class="form-control" id="email" placeholder="email">
        </div>
      </div>
      <!--  col-md-6   -->

      <div class="col-md-6">
        <div class="form-group">
          <label for="url">Your Website <small>Please include http://</small></label>
          <input type="url" class="form-control" id="url" placeholder="url">
        </div>

      </div>
      <!--  col-md-6   -->
    </div>
    <!--  row   -->


    <label for="contact-preference">When is the best time of day to reach you?</label>
    <div class="radio">
      <label>
        <input type="radio" name="contact-preference" id="contact-preference" value="am" checked>Morning
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="contact-preference" id="contact-preference" value="pm" checked>Evening
      </label>
    </div>

    <label for="newsletter">Would you like to recieve our email newsletter?</label>
    <div class="checkbox">

      <label>
        <input type="checkbox" value="Sure!" id="newsletter"> Sure!
      </label>
    </div>


    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

Example 4: Form Inline – Bootstrap 4

<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <form class="form-inline">
          <div class="row">
            <div class="form-group">
              <label for="exampleInputEmail3">Name</label> <br>
              <input type="text" class="form-control" id="exampleInputEmail3" placeholder="Name">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail3">Email address</label> <br>
              <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail3">Mobile</label> <br>
              <input type="tel" class="form-control" id="exampleInputEmail3" placeholder="Mobile">
            </div>
          </div>
          <div class="row">
            <div class="form-group">
              <label for="exampleInputEmail3">State</label> <br>
              <input type="text" class="form-control" id="exampleInputEmail3" placeholder="State">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail3">City</label> <br>
              <input type="text" class="form-control" id="exampleInputEmail3" placeholder="City">
            </div>
            <div class="form-group">
              <label for="exampleInputEmail3">Zip</label> <br>
              <input type="text" class="form-control" id="exampleInputEmail3" placeholder="Zip">
            </div>
          </div>
          <div class="row">
            <div class="" align="center">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </div>  
        </form>
      </div>
    </div>
  </div>
</section>

CSS Code

.row {
  margin:15px 0;
}
label {
  margin-bottom: 0;
  margin-left: 1px;
}

Example 5: Bootstrap mixed form

<div class="container">
  
  <section class="panel panel-default">
<div class="panel-heading"> 
<h3 class="panel-title">Panel heading</h3> 
</div> 
<div class="panel-body">
  
<div class="container">
  <h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
  <form role="form" class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-1" for="inputEmail1">Email</label>
      <div class="col-sm-5"><input class="form-control" id="inputEmail1" placeholder="Email" type="email"></div>
    </div>
    <div class="form-group">
      <label class="col-sm-1" for="inputPassword1">Password</label>
      <div class="col-sm-5"><input class="form-control" id="inputPassword1" placeholder="Password" type="password"></div>
    </div>
    <div class="form-group">
      <label class="col-sm-12" for="TextArea">Textarea</label>
      <div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
    </div>
    <div class="form-group">
      <div class="col-sm-3"><label>First name</label><input class="form-control" placeholder="First" type="text"></div>
      <div class="col-sm-3"><label>Last name</label><input class="form-control" placeholder="Last" type="text"></div>
    </div>
    <div class="form-group">
      <label class="col-sm-12">Phone number</label>
      <div class="col-sm-1"><input class="form-control" placeholder="000" type="text"><div class="help">area</div></div>
      <div class="col-sm-1"><input class="form-control" placeholder="000" type="text"><div class="help">local</div></div>
      <div class="col-sm-2"><input class="form-control" placeholder="1111" type="text"><div class="help">number</div></div>
      <div class="col-sm-2"><input class="form-control" placeholder="123" type="text"><div class="help">ext</div></div>
    </div>
    <div class="form-group">
      <label class="col-sm-1">Options</label>
      <div class="col-sm-2"><input class="form-control" placeholder="Option 1" type="text"></div>
      <div class="col-sm-3"><input class="form-control" placeholder="Option 2" type="text"></div>
    </div>
    <div class="form-group">
      <div class="col-sm-6">
        <button type="submit" class="btn btn-info pull-right">Submit</button>
      </div>
    </div>
  </form>
  <hr>
</div>
  
</div><!-- panel-body // -->
<div class="panel-footer">
   <a class="btn btn-success">  Yes button </a> 
   <a href="javascript: history.back()" class="btn btn-primary"> Go  back</a> 
</div><!-- panel-footer // -->
</section><!-- panel// -->

  
</div> <!-- container// -->

Example 6: Bootstrap 4 – form-group

<div class="container">
  <div class="row">
    <aside class="col-md-3 bg-light d-flex">

      <a href="https://placeholder.com" class=""><img src="http://via.placeholder.com/100x100"></a>

      <div class="">

        <form>
          <div class="form-group">
            <label for="exampleFormControlInput1">Email address</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect1">Example select</label>
            <select class="form-control" id="exampleFormControlSelect1">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlSelect2">Example multiple select</label>
            <select multiple class="form-control" id="exampleFormControlSelect2">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
          <div class="form-group">
            <label for="exampleFormControlTextarea1">Example textarea</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
          </div>
        </form>

      </div>

      <div class="">
        <div class="mb-3">
          <button type="button" class="btn btn-secondary btn-lg btn-block">Add to cart</button>
        </div>
      </div>

    </aside>
    <!-- Canvas -->
    <div class="col-md-9 bg-secondary d-flex justify-content-center">
      <canvas style="width: 590.6px; height: 826.8px; outline: none; background-color: #fff;" class="mt-5 mb-5"></canvas>
    </div>
  </div>
</div>

I hope you get an idea about form group bootstrap.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  jQuery Ajax File Upload with Progress Bar

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP Fetch all HTTP request headers
  2. Read Also:  WooCommerce Get Product Dimensions
  3. Read Also:  Simple AngularJS Shopping Cart Application
  4. Read Also:  PayPal Subscriptions(recurring payments) Payment Gateway Integration in PHP Source Code Download
  5. Read Also:  date time picker jquery
  6. Read Also:  Laravel 6 get ip address Example
  7. Read Also:  How to get the browser viewport height and width dimensions?
  8. Read Also:  Laravel 6 Multiple orWhere with multiple parameters
  9. Read Also:  Laravel 6 JQuery Ajax Post Request Example
  10. Read Also:  Laravel 6 JQuery Ajax Post Request Example
CLOSEX