Form Layout

Combine VelinStyle's grid system and utility classes to build any form layout — from stacked fields to multi-column and inline forms.

Stacked (default)

Fields inside a <form> stack vertically by default with .velin-field spacing.

<form>
  <div class="velin-field">
    <label class="velin-label" for="name">Full name</label>
    <input type="text" class="velin-input" id="name">
  </div>
  <div class="velin-field">
    <label class="velin-label" for="email">Email</label>
    <input type="email" class="velin-input" id="email">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Grid layout

Use the grid row/col classes to create multi-column form layouts.

First name

Last name

Address

City

State

Zip

<form>
  <div class="row g-3">
    <div class="col-md-6">
      <div class="velin-field">
        <label class="velin-label">First name</label>
        <input type="text" class="velin-input">
      </div>
    </div>
    <div class="col-md-6">
      <div class="velin-field">
        <label class="velin-label">Last name</label>
        <input type="text" class="velin-input">
      </div>
    </div>
    <div class="col-12">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Inline form

Use flex utilities to place controls side-by-side on a single row.

<form class="d-flex gap-2 align-items-end flex-wrap">
  <div class="velin-field" style="flex:1;min-width:200px">
    <label class="velin-label">Email</label>
    <input type="email" class="velin-input">
  </div>
  <div class="velin-field" style="flex:1;min-width:200px">
    <label class="velin-label">Password</label>
    <input type="password" class="velin-input">
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>