Form Layouts

Use custom form layout styles that can be added to element like cards, modals, sidebars or any other elements. Additional utilities classes can be used to vary this layout.

Form Group

A form with a label on top of each form control.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput" class="d-block">Firstname</label>
    <input type="text" class="form-control" placeholder="Enter your firstname">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2" class="d-block">Lastname</label>
    <input type="text" class="form-control" placeholder="Enter your lastname">
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
  <button class="btn btn-secondary" type="cancel">Cancel</button>
</form>

Fieldset

Group related elements in a form with a legend.

Personal Information

Firstname

Lastname

<fieldset class="form-fieldset">
  <legend>Personal Information</legend>
  <div class="form-group">
    <label class="d-block">Firstname</label>
    <input type="text" class="form-control" placeholder="Enter your firstname">
  </div>
  <div class="form-group">
    <label class="d-block">Lastname</label>
    <input type="text" class="form-control" placeholder="Enter your lastname">
  </div>
</fieldset>

Form Grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

Password

Address

Address 2

Birthday

Agree with Terms of Use and Privacy Policy

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-5">
      <label>Birthday</label>
      <select class="custom-select">
        ...
      </select>
    </div>
    <div class="form-group col-md-3 d-flex align-items-end">
      <select class="custom-select">
        ...
      </select>
    </div>
    <div class="form-group col-md-4 d-flex align-items-end">
      <select class="custom-select">
        ...
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">Agree with Terms of Use and Privacy Policy</label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit Form</button>
</form>

Horizontal Form

Create horizontal forms with the grid by adding the .row class to form groups and using the .col classes to specify the width of your labels and controls.

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="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 type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-form-label col-sm-2 pt-0">Radios</label>
    <div class="col-sm-10">
      <div class="custom-control custom-radio">
        <input type="radio" name="customRadio" class="custom-control-input" checked>
        <label class="custom-control-label">First radio</label>
      </div>
      <div class="custom-control custom-radio">
        <input type="radio" name="customRadio" class="custom-control-input">
        <label class="custom-control-label">Second radio</label>
      </div>
      <div class="custom-control custom-radio">
        <input type="radio" name="customRadio" class="custom-control-input" disabled>
        <label class="custom-control-label">Third disabled radio</label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input">
        <label class="custom-control-label">Example checkbox</label>
      </div>
    </div>
  </div>
  <div class="form-group row mg-b-0">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Submit Form</button>
    </div>
  </div>
</form>

Form Alignment

Use flex utilities classes on form containers to change the alignment of forms on the main axis.

<div class="d-flex align-items-center justify-content-center pd-y-40 bg-gray-100">
  <form class="wd-300 bd bd-gray-300 rounded pd-30 bg-white">
    <div class="form-group">
      <input type="email" class="form-control" placeholder="Enter your email">
    </div>
    <div class="form-group">
      <input type="password" class="form-control" placeholder="Enter your password">
    </div>
    <button type="submit" class="btn btn-primary btn-block">Submit Form</button>
  </form>
</div>