## Layout

Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.

Forms Layout on Bootstrap

#### Basic form

    <form>
      <div class="mb-3">
        <label class="form-label" for="basic-form-name">Name</label>
        <input class="form-control" id="basic-form-name" type="text" placeholder="Name" />
      </div>
      <div class="mb-3">
        <label class="form-label" for="basic-form-email">Email address</label>
        <input class="form-control" id="basic-form-email" type="email" placeholder="name@example.com" />
      </div>
      <div class="mb-3">
        <label class="form-label" for="basic-form-password">Password</label>
        <input class="form-control" id="basic-form-password" type="password" placeholder="Password" />
      </div>
      <div class="mb-3">
        <label class="form-label" for="basic-form-dob">Date of Birth</label>
        <input class="form-control" id="basic-form-dob" type="date" />
      </div>
      <div class="mb-3">
        <label class="form-label" for="basic-form-gender">Gender</label>
        <select class="form-select" id="basic-form-gender" aria-label="Default select example">
          <option selected="selected">Select your gender</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
          <option value="other">Other</option>
        </select>
      </div>
      <div class="mb-3">
        <div class="form-check">
          <input class="form-check-input" id="flexRadioDefault1" type="radio" name="flexRadioDefault" />
          <label class="form-check-label mb-0" for="flexRadioDefault1">Personal Account</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" id="flexRadioDefault2" type="radio" name="flexRadioDefault" checked="checked" />
          <label class="form-check-label mb-0" for="flexRadioDefault2">Business Account</label>
        </div>
      </div>
      <div class="mb-3">
        <label class="form-label">Upload Image</label>
        <input class="form-control" type="file" />
      </div>
      <div class="mb-3">
        <label class="form-label" for="basic-form-textarea">Description</label>
        <textarea class="form-control" id="basic-form-textarea" rows="3" placeholder="Description"></textarea>
      </div>
      <div class="mb-3 form-check">
        <input class="form-check-input" id="basic-form-checkbox" type="checkbox" />
        <label class="form-check-label" for="basic-form-checkbox">Remember me</label>
      </div>
      <button class="btn btn-primary" type="submit">Submit</button>
    </form>

Name
Email address
Password
Date of Birth
Gender
Personal Account
Business Account
Upload Image
Description
Remember me

#### Horizontal form

    <form>
      <div class="row mb-3">
        <label class="col-sm-2 col-form-label" for="inputEmail3">Email</label>
        <div class="col-sm-10">
          <input class="form-control" id="inputEmail3" type="email" />
        </div>
      </div>
      <div class="row mb-3">
        <label class="col-sm-2 col-form-label" for="inputPassword3">Password</label>
        <div class="col-sm-10">
          <input class="form-control" id="inputPassword3" type="password" />
        </div>
      </div>
      <fieldset>
        <div class="row mb-3">
          <label class="col-form-label col-sm-2 pt-0">Radios</label>
          <div class="col-sm-10">
            <div class="form-check">
              <input class="form-check-input" id="gridRadios1" type="radio" name="gridRadios" value="option1" checked="" />
              <label class="form-check-label" for="gridRadios1">First radio</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" id="gridRadios2" type="radio" name="gridRadios" value="option2" />
              <label class="form-check-label" for="gridRadios2">Second radio</label>
            </div>
            <div class="form-check disabled">
              <input class="form-check-input" id="gridRadios3" type="radio" name="gridRadios" value="option3" disabled="" />
              <label class="form-check-label" for="gridRadios3">Third disabled radio</label>
            </div>
          </div>
        </div>
      </fieldset>
      <div class="row mb-3">
        <div class="col-form-label col-sm-2 pt-0">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>
      <button class="btn btn-primary" type="submit">Sign in</button>
    </form>

Email
Password
Radios
First radio
Second radio
Third disabled radio
Checkbox
Example checkbox

#### Horizontal form label sizing

    <div class="row mb-3">
      <label class="col-sm-2 col-form-label col-form-label-sm" for="colFormLabelSm">Email</label>
      <div class="col-sm-10">
        <input class="form-control form-control-sm" id="colFormLabelSm" type="email" placeholder="col-form-label-sm" />
      </div>
    </div>
    <div class="row mb-3">
      <label class="col-sm-2 col-form-label" for="colFormLabel">Email</label>
      <div class="col-sm-10">
        <input class="form-control" id="colFormLabel" type="email" placeholder="col-form-label" />
      </div>
    </div>
    <div class="row">
      <label class="col-sm-2 col-form-label col-form-label-lg" for="colFormLabelLg">Email</label>
      <div class="col-sm-10">
        <input class="form-control form-control-lg" id="colFormLabelLg" type="email" placeholder="col-form-label-lg" />
      </div>
    </div>

Email
Email
Email

#### Form grid

    <div class="row">
      <div class="col">
        <input class="form-control" type="text" placeholder="First name" aria-label="First name" />
      </div>
      <div class="col">
        <input class="form-control" type="text" placeholder="Last name" aria-label="Last name" />
      </div>
    </div>

#### Form Grid Layout

    <form class="row g-3">
      <div class="col-md-6">
        <label class="form-label" for="inputEmail4">Email</label>
        <input class="form-control" id="inputEmail4" type="email" />
      </div>
      <div class="col-md-6">
        <label class="form-label" for="inputPassword4">Password</label>
        <input class="form-control" id="inputPassword4" type="password" />
      </div>
      <div class="col-12">
        <label class="form-label" for="inputAddress">Address</label>
        <input class="form-control" id="inputAddress" type="text" placeholder="1234 Main St" />
      </div>
      <div class="col-12">
        <label class="form-label" for="inputAddress2">Address 2</label>
        <input class="form-control" id="inputAddress2" type="text" placeholder="Apartment, studio, or floor" />
      </div>
      <div class="col-md-6">
        <label class="form-label" for="inputCity">City</label>
        <input class="form-control" id="inputCity" type="text" />
      </div>
      <div class="col-md-4">
        <label class="form-label" for="inputState">State</label>
        <select class="form-select" id="inputState">
          <option selected="selected">Choose...</option>
          <option>...</option>
        </select>
      </div>
      <div class="col-md-2">
        <label class="form-label" for="inputZip">Zip</label>
        <input class="form-control" id="inputZip" type="text" />
      </div>
      <div class="col-12">
        <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>
      <div class="col-12">
        <button class="btn btn-primary" type="submit">Sign in</button>
      </div>
    </form>

Email
Password
Address
Address 2
City
State
Zip
Check me out

#### Grid - Column Sizing

    <div class="row g-3">
      <div class="col-sm-7">
        <input class="form-control" type="text" placeholder="City" aria-label="City" />
      </div>
      <div class="col-sm">
        <input class="form-control" type="text" placeholder="State" aria-label="State" />
      </div>
      <div class="col-sm">
        <input class="form-control" type="text" placeholder="Zip" aria-label="Zip" />
      </div>
    </div>

#### Grid - Auto Sizing

    <form class="row gy-2 gx-3 align-items-center">
      <div class="col-auto">
        <label class="visually-hidden" for="autoSizingInput">Name</label>
        <input class="form-control" id="autoSizingInput" type="text" placeholder="Jane Doe" />
      </div>
      <div class="col-auto">
        <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
        <div class="input-group">
          <div class="input-group-text">@</div>
          <input class="form-control" id="autoSizingInputGroup" type="text" placeholder="Username" />
        </div>
      </div>
      <div class="col-auto">
        <label class="visually-hidden" for="autoSizingSelect">Preference</label>
        <select class="form-select" id="autoSizingSelect">
          <option selected="selected">Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
      </div>
      <div class="col-auto">
        <div class="form-check mb-0">
          <input class="form-check-input" id="autoSizingCheck" type="checkbox" />
          <label class="form-check-label mb-0" for="autoSizingCheck">Remember me</label>
        </div>
      </div>
      <div class="col-auto">
        <button class="btn btn-primary" type="submit">Submit</button>
      </div>
    </form>

Name
Username
@
Preference
Remember me

#### Gutters

    <div class="row g-3">
      <div class="col">
        <input class="form-control" type="text" placeholder="First name" aria-label="First name" />
      </div>
      <div class="col">
        <input class="form-control" type="text" placeholder="Last name" aria-label="Last name" />
      </div>
    </div>

#### Inline forms

    <form class="row row-cols-lg-5 g-3 align-items-center">
      <div class="col-12">
        <label class="sr-only" for="inlineFormInputName">Name</label>
        <input class="form-control" id="inlineFormInputName" type="text" placeholder="Jane Doe" />
      </div>
      <div class="col-12">
        <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
        <div class="input-group">
          <div class="input-group-text">@</div>
          <input class="form-control" id="inlineFormInputGroupUsername" type="text" placeholder="Username" />
        </div>
      </div>
      <div class="col-12">
        <label class="sr-only" for="inlineFormSelectPref">Preference</label>
        <select class="form-select" id="inlineFormSelectPref">
          <option selected="">Choose...</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
        </select>
      </div>
      <div class="col-12">
        <div class="form-check mb-0">
          <input class="form-check-input" id="inlineFormCheck" type="checkbox" />
          <label class="mb-0 form-check-label" for="inlineFormCheck">Remember me</label>
        </div>
      </div>
      <div class="col-12">
        <button class="btn btn-primary" type="submit">Submit</button>
      </div>
    </form>

Name
Username
@
Preference
Remember me

#### Utilities

    <div class="mb-3">
      <label class="form-label" for="formGroupExampleInput">Example label</label>
      <input class="form-control" id="formGroupExampleInput" type="text" placeholder="Example input placeholder" />
    </div>
    <div class="mb-3">
      <label class="form-label" for="formGroupExampleInput2">Another label</label>
      <input class="form-control" id="formGroupExampleInput2" type="text" placeholder="Another input placeholder" />
    </div>

Example label
Another label

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize