<div class="row justify-content-center text-center">
   <div class="col-9">
      <h3>Overview</h3>
      <p>Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized
         displays for a more consistent rendering across browsers and devices.</p>
   </div>
</div>

<form lpformnum="1">
   <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" type="email">
   </div>
   <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
   </div>
   <div class="form-group form-check">
      <input class="form-check-input" id="exampleCheck1" type="checkbox">
      <label class="form-check-label" for="exampleCheck1">Check me out</label>
   </div>
   <button type="submit" class="btn btn-secondary">Submit</button>
   <div class="clearfix"></div>
</form>
<hr class="my-5">
<div class="row justify-content-center text-center">
   <div class="col-9">
      <h3>Form controls</h3>
      <p>Textual form controls&mdash;like &lt;input&gt;s, &lt;select&gt;s, and &lt;textarea&gt;s&mdash;are styled with the <code>.form-control</code> class. Included are styles for general appearance, focus state, sizing, and more.</p>
   </div>
</div>

<form lpformnum="2">
   <div class="form-group">
      <label for="exampleFormControlInput1">Email address</label>
      <input class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" type="email">
   </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>
<hr class="my-5">
<div class="row justify-content-center text-center pb-3">
   <div class="col-9">
      <h3>Sizing</h3>
      <p>Set heights using classes like <code>.form-control-lg</code> and <code>.form-control-sm</code>.</p>
   </div>
</div>

<p><code>.form-control-lg</code></p>
<input class="form-control form-control-lg mb-4" type="text">
<p>Default Input</p>
<input class="form-control mb-4" type="text">
<p><code>.form-control-sm</code></p>
<input class="form-control form-control-sm mb-4" type="text">
<hr class="my-5">
<div class="row justify-content-center text-center pb-3">
   <div class="col-9">
      <h3>Form row</h3>
      <p>You may also swap <code>.row</code> for <code>.form-row</code>, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.</p>
   </div>
</div>

<form lpformnum="3">
   <div class="form-row">
      <div class="form-group col-md-6">
         <label for="inputEmail4">Email</label>
         <input class="form-control" id="inputEmail4" placeholder="Email" type="email">
      </div>
      <div class="form-group col-md-6">
         <label for="inputPassword4">Password</label>
         <input class="form-control" id="inputPassword4" placeholder="Password" type="password">
      </div>
   </div>
   <div class="form-group">
      <label for="inputAddress">Address</label>
      <input class="form-control" id="inputAddress" placeholder="1234 Main St" type="text">
   </div>
   <div class="form-group">
      <label for="inputAddress2">Address 2</label>
      <input class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor" type="text">
   </div>
   <div class="form-row">
      <div class="form-group col-md-6">
         <label for="inputCity">City</label>
         <input class="form-control" id="inputCity" type="text">
      </div>
      <div class="form-group col-md-4">
         <label for="inputState">State</label>
         <select id="inputState" class="form-control">
            <option selected="">Choose...</option>
            <option>...</option>
         </select>
      </div>
      <div class="form-group col-md-2">
         <label for="inputZip">Zip</label>
         <input class="form-control" id="inputZip" type="text">
      </div>
   </div>
   <div class="form-group">
      <div class="form-check">
         <input class="form-check-input" id="gridCheck" type="checkbox">
         <label class="form-check-label" for="gridCheck">
            Check me out
         </label>
      </div>
   </div>
   <button type="submit" class="btn btn-primary">Sign in</button>
</form>
<hr class="my-5">
<div class="row justify-content-center text-center pb-5">
   <div class="col-9">
      <h3>Horizontal form</h3>
      <p>You may also swap <code>.row</code> for <code>.form-row</code>, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.</p>
   </div>
</div>

<form lpformnum="4">
   <div class="form-group row">
      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
         <input class="form-control" id="inputEmail3" placeholder="Email" type="email">
      </div>
   </div>
   <div class="form-group row">
      <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
         <input class="form-control" id="inputPassword3" placeholder="Password" type="password">
      </div>
   </div>
   <fieldset class="form-group">
      <div class="row">
         <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
         <div class="col-sm-10">
            <div class="form-check">
               <input class="form-check-input" name="gridRadios" id="gridRadios1" value="option1" checked="" type="radio">
               <label class="form-check-label" for="gridRadios1">
                  First radio
               </label>
            </div>
            <div class="form-check">
               <input class="form-check-input" name="gridRadios" id="gridRadios2" value="option2" type="radio">
               <label class="form-check-label" for="gridRadios2">
                  Second radio
               </label>
            </div>
            <div class="form-check disabled">
               <input class="form-check-input" name="gridRadios" id="gridRadios3" value="option3" disabled="" type="radio">
               <label class="form-check-label" for="gridRadios3">
                  Third disabled radio
               </label>
            </div>
         </div>
      </div>
   </fieldset>
   <div class="form-group row">
      <div class="col-sm-2">Checkbox</div>
      <div class="col-sm-10">
         <div class="form-check">
            <input class="form-check-input" id="gridCheck1" type="checkbox">
            <label class="form-check-label" for="gridCheck1">
               Example checkbox
            </label>
         </div>
      </div>
   </div>
   <div class="form-group row">
      <div class="col-sm-10">
         <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
   </div>
</form>
<hr class="my-5">
<div class="row justify-content-center text-center pb-4">
   <div class="col-9">
      <h3>Auto-sizing</h3>
      <p>You may also swap <code>.row</code> for <code>.form-row</code>, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.</p>
   </div>
</div>

<form lpformnum="5">
   <div class="form-row align-items-center">
      <div class="col-auto">
         <label class="sr-only" for="inlineFormInput">Name</label>
         <input class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe" type="text">
      </div>
      <div class="col-auto">
         <label class="sr-only" for="inlineFormInputGroup">Username</label>
         <div class="input-group mb-2">
            <div class="input-group-prepend">
               <div class="input-group-text">@</div>
            </div>
            <input class="form-control" id="inlineFormInputGroup" placeholder="Username" type="text">
         </div>
      </div>
      <div class="col-auto">
         <div class="form-check mb-2">
            <input class="form-check-input" id="autoSizingCheck" type="checkbox">
            <label class="form-check-label" for="autoSizingCheck">
               Remember me
            </label>
         </div>
      </div>
      <div class="col-auto">
         <button type="submit" class="btn btn-primary mb-2">Submit</button>
      </div>
   </div>
</form>