Form layouts

  1. Forms
  2. Form Elements
  3. Form layouts

Vertical request form

Fields stack in a clear reading order. 

<div class="mb-3">
  <label for="subject" class="form-label">Request subject</label>
  <input type="text" class="form-control" id="subject">
</div>
<div class="mb-3">
  <label for="details" class="form-label">Details</label>
  <textarea class="form-control" id="details" rows="3"></textarea>
</div>

Horizontal account form

Labels align beside controls on wider screens. 

<div class="row mb-3">
  <label for="email" class="col-sm-3 col-form-label">Email</label>
  <div class="col-sm-9">
    <input type="email" class="form-control" id="email">
  </div>
</div>

Responsive contact details

Related fields share a row and stack on small screens. 

<form class="row">
  <div class="col-md-6">
    <label for="first-name" class="form-label">First name</label>
    <input type="text" class="form-control" id="first-name">
  </div>
  <div class="col-md-6">...</div>
  <div class="col-12">
    <button type="button" class="btn btn-primary">Save contact</button>
  </div>
</form>

Compact filter row

Keep search and filter controls together. 

<div class="input-group">
  <span class="input-group-text">
    <i class="ri-search-line"></i>
  </span>
  <input type="search" class="form-control" placeholder="Name or email">
  <button class="btn btn-primary" type="button">Search</button>
</div>

Billing profile

Separate contact, address and billing preferences.

Contact information
Billing address 
<form>
  <fieldset>
    <legend class="fs-14 fw-semibold mb-3">Contact information</legend>
    <div class="row">...</div>
  </fieldset>
  <fieldset>
    <legend class="fs-14 fw-semibold mb-3">Billing address</legend>
    <div class="row">...</div>
  </fieldset>
</form>