<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Enter Email">
    <span class="mt-2 d-block">We'll never share your email with anyone else.</span>
  </div>
  <div class="form-group">
    <label for="exampleFormControlPassword">Password</label>
    <input type="password" class="form-control" id="exampleFormControlPassword" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect12">Example select</label>
    <select class="form-control" id="exampleFormControlSelect12">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControl2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControl2">
      <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>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
  <div class="form-footer mt-6">
    <button type="submit" class="btn btn-primary btn-pill">Submit</button>
    <button type="submit" class="btn btn-light btn-pill">Cancel</button>
  </div>
</form>


          

<form>
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="fname">First name</label>
        <input type="text" class="form-control" placeholder="John">
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="lname">Last name</label>
        <input type="text" class="form-control" placeholder="Smith">
      </div>
    </div>
    <div class="col-sm-6">
      <div class="form-group">
        <label for="city">City</label>
        <input type="text" class="form-control" placeholder="City Name">
      </div>
    </div>
    <div class="col-sm-6">
      <div class="row">
        <div class="col-6">
          <div class="form-group">
            <label for="State">State</label>
            <input type="text" class="form-control" placeholder="State">
          </div>
        </div>
        <div class="col-6">
          <div class="form-group">
            <label for="Zip">Zip</label>
            <input type="text" class="form-control" placeholder="Zip">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="form-footer pt-5 border-top">
    <button type="submit" class="btn btn-primary btn-pill">Submit</button>
  </div>



          

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>
  <button type="submit" class="btn btn-primary btn-pill mb-2">Submit</button>
</form>
<form>
  <p class="text-dark mb-4">Custom form controls and selects are also supported.</p>
  <label class="text-dark">Preference</label>
  <select class="custom-select my-1 mr-sm-2 w-auto" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label class="control control-checkbox d-inline-block">Remember my preference
    <input type="checkbox" name="checkbox1" />
    <div class="control-indicator"></div>
  </label>
  <button type="submit" class="btn btn-primary btn-pill ml-2">Submit</button>
</form>

          

<form>
  <div class="form-group">
    <label for="exampleFormControlInput3">Email address</label>
    <input type="email" class="form-control rounded-pill" id="exampleFormControlInput3" placeholder="Enter Email">
    <span class="mt-2 d-block">We'll never share your email with anyone else.</span>
  </div>
  <div class="form-group">
    <label for="exampleFormControlPassword31">Password</label>
    <input type="password" class="form-control rounded-pill" id="exampleFormControlPassword31" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect13">Example select</label>
    <select class="form-control rounded-pill" id="exampleFormControlSelect13">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-footer mt-4">
    <button type="submit" class="btn btn-primary btn-pill">Submit</button>
    <button type="submit" class="btn btn-light btn-pill">Cancel</button>
  </div>
</form>


          

<form>
  <div class="form-group">
    <label for="exampleFormControlInput4">Email address</label>
    <input type="email" class="form-control rounded-0" id="exampleFormControlInput4" placeholder="Enter Email">
    <span class="mt-2 d-block">We'll never share your email with anyone else.</span>
  </div>
  <div class="form-group">
    <label for="exampleFormControlPasswor3">Password</label>
    <input type="password" class="form-control rounded-0" id="exampleFormControlPasswor3" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect14">Example select</label>
    <select class="form-control rounded-0" id="exampleFormControlSelect14">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-footer">
    <button type="submit" class="btn btn-secondary btn-pill">Submit</button>
    <button type="submit" class="btn btn-light btn-pill">Cancel</button>
  </div>

</form>


          

<form>
  <div class="form-group">
    <label for="exampleFormControlInput5">Email address</label>
    <input type="email" class="form-control rounded-0 bg-light" id="exampleFormControlInput5" placeholder="Enter Email">
    <span class="mt-2 d-block">We'll never share your email with anyone else.</span>
  </div>
  <div class="form-group">
    <label for="exampleFormControlPassword4">Password</label>
    <input type="password" class="form-control rounded-0 bg-light" id="exampleFormControlPassword4"
      placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect15">Example select</label>
    <select class="form-control rounded-0 bg-light" id="exampleFormControlSelect15">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-footer">
    <button type="submit" class="btn btn-secondary btn-pill">Submit</button>
    <button type="submit" class="btn btn-light btn-pill">Cancel</button>
  </div>
</form>


          

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>


          

<form>
  <div class="form-group">
    <label for="exampleFormControlInput6">Large input</label>
    <input class="form-control form-control-lg" type="text" placeholder="Large input">
  </div>
  <div class="form-group">
    <label for="exampleFormControlInput7">Default input</label>
    <input class="form-control" type="text" placeholder="Default input">
  </div>
  <div class="form-group">
    <label for="exampleFormControlInput8">Small input</label>
    <input class="form-control form-control-sm" type="text" placeholder="Small input">
  </div>
</form>


          

<form>
  <div class="form-row">
    <div class="col-6">
      <input type="text" class="form-control" placeholder="col-6">
    </div>
    <div class="col-3">
      <input type="text" class="form-control" placeholder="col-3">
    </div>
    <div class="col-3">
      <input type="text" class="form-control" placeholder="col-3">
    </div>
  </div>
</form>