Form Layout

  1. Forms
  2. Form Layout

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. Requires the $enable-grid-classes Sass variable to be enabled (on by default).

<form action="javascript:void(0);">
    <div class="row">
        <div class="col-6">
            <div class="mb-3">
                <label for="firstNameinput" class="form-label">First Name</label>
                <input type="text" class="form-control" placeholder="Enter your firstname" id="firstNameinput">
            </div>
        </div><!--end col-->
        <div class="col-6">
            <div class="mb-3">
                <label for="lastNameinput" class="form-label">Last Name</label>
                <input type="text" class="form-control" placeholder="Enter your lastname" id="lastNameinput">
            </div>
        </div><!--end col-->
        <div class="col-12">
            <div class="mb-3">
                <label for="compnayNameinput" class="form-label">Company Name</label>
                <input type="text" class="form-control" placeholder="Enter company name" id="compnayNameinput">
            </div>
        </div><!--end col-->
        <div class="col-6">
            <div class="mb-3">
                <label for="phonenumberInput" class="form-label">Phone Number</label>
                <input type="tel" class="form-control" placeholder="+(245) 451 45123" id="phonenumberInput">
            </div>
        </div><!--end col-->
        <div class="col-6">
            <div class="mb-3">
                <label for="emailidInput" class="form-label">Email Address</label>
                <input type="email" class="form-control" placeholder="example@gamil.com" id="emailidInput">
            </div>
        </div><!--end col-->
        <div class="col-12">
            <div class="mb-3">
                <label for="address1ControlTextarea" class="form-label">Address</label>
                <input type="text" class="form-control" placeholder="Address 1" id="address1ControlTextarea">
            </div>
        </div><!--end col-->
        <div class="col-6">
            <div class="mb-3">
                <label for="citynameInput" class="form-label">City</label>
                <input type="email" class="form-control" placeholder="Enter your city" id="citynameInput">
            </div>
        </div><!--end col-->
        <div class="col-6">
            <div class="mb-3">
                <label for="ForminputState" class="form-label">State</label>
                <select id="ForminputState" class="form-select">
                    <option selected>Choose...</option>
                    <option>...</option>
                </select>
            </div>
        </div><!--end col-->
        <div class="col-lg-12">
            <div class="text-end">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div><!--end col-->
    </div><!--end row-->
</form>

Gutters

By adding gutter modifier classes, you can have control over the gutter width in as well the inline as block direction. Also requires the $enable-grid-classes Sass variable to be enabled (on by default).

<form action="javascript:void(0);" class="row g-3">
    <div class="col-md-12">
        <label for="fullnameInput" class="form-label">Name</label>
        <input type="text" class="form-control" id="fullnameInput" placeholder="Enter your name">
    </div>
    <div class="col-md-6">
        <label for="inputEmail4" class="form-label">Email</label>
        <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="col-md-6">
        <label for="inputPassword4" class="form-label">Password</label>
        <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
    <div class="col-12">
        <label for="inputAddress" class="form-label">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
    </div>
    <div class="col-12">
        <label for="inputAddress2" class="form-label">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
    </div>
    <div class="col-md-6">
        <label for="inputCity" class="form-label">City</label>
        <input type="text" class="form-control" id="inputCity" placeholder="Enter your city">
    </div>
    <div class="col-md-4">
        <label for="inputState" class="form-label">State</label>
        <select id="inputState" class="form-select">
            <option selected>Choose...</option>
            <option>...</option>
        </select>
    </div>
    <div class="col-md-2">
        <label for="inputZip" class="form-label">Zip</label>
        <input type="text" class="form-control" id="inputZip" placeholder="Zin code">
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
                Check me out
            </label>
        </div>
    </div>
    <div class="col-12">
        <div class="text-end">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
</form>

Vertical Form

Example of vertical form using form-control class. No need to specify row and col class to create vertical form.

<form action="">
    <div class="mb-3">
        <label for="employeeName" class="form-label">Employee Name</label>
        <input type="text" class="form-control" id="employeeName" placeholder="Enter emploree name">
    </div>
    <div class="mb-3">
        <label for="employeeUrl" class="form-label">Employee Department URL</label>
        <input type="url" class="form-control" id="employeeUrl" placeholder="Enter emploree url">
    </div>
    <div class="mb-3">
        <label for="StartleaveDate" class="form-label">Start Leave Date</label>
        <input type="date" class="form-control" id="StartleaveDate">
    </div>
    <div class="mb-3">
        <label for="EndleaveDate" class="form-label">End Leave Date</label>
        <input type="date" class="form-control" id="EndleaveDate">
    </div>
    <div class="mb-3">
        <label for="VertimeassageInput" class="form-label">Message</label>
        <textarea class="form-control" id="VertimeassageInput" rows="3" placeholder="Enter your message"></textarea>
    </div>
    <div class="text-end">
        <button type="submit" class="btn btn-primary">Add Leave</button>
    </div>
</form>

Horizontal Form

Create horizontal forms with the grid by adding the row class to form groups and using the col-*-* class to specify the width of your labels and controls. Be sure to add col-form-label class to your <label>s as well so they’re vertically centered with their associated form controls.

<form action="">
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="nameInput" class="form-label">Name</label>
        </div>
        <div class="col-lg-9">
            <input type="text" class="form-control" id="nameInput" placeholder="Enter your name">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="websiteUrl" class="form-label">Website URL</label>
        </div>
        <div class="col-lg-9">
            <input type="url" class="form-control" id="websiteUrl" placeholder="Enter your url">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="dateInput" class="form-label">Date</label>
        </div>
        <div class="col-lg-9">
            <input type="date" class="form-control" id="dateInput">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="timeInput" class="form-label">Time</label>
        </div>
        <div class="col-lg-9">
            <input type="time" class="form-control" id="timeInput">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="leaveemails" class="form-label">Email Id</label>
        </div>
        <div class="col-lg-9">
            <input type="email" class="form-control" id="leaveemails" placeholder="Enter your email">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="contactNumber" class="form-label">Contact Number</label>
        </div>
        <div class="col-lg-9">
            <input type="number" class="form-control" id="contactNumber" placeholder="+91 9876543210">
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-lg-3">
            <label for="meassageInput" class="form-label">Message</label>
        </div>
        <div class="col-lg-9">
            <textarea class="form-control" id="meassageInput" rows="3" placeholder="Enter your message"></textarea>
        </div>
    </div>
    <div class="text-end">
        <button type="submit" class="btn btn-primary">Add Leave</button>
    </div>
</form>

Horizontal Form Label Sizing

Use col-form-label-sm class to set small size form label or col-form-label-lg class to set large size form label to <label>. No such class is required for the default size form label.

<!-- Col Form Label Small -->
<div class="row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
</div>

<!-- Col Form Label Default -->
<div class="row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
</div>

<!-- Col Form Label Large -->
<div class="row">
    <label for="lg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control form-control-lg" id="colFormLabelSm" placeholder="col-form-label-lg">
    </div>
</div>

Column Sizing

Use col-sm- class with required size value to set column size as per your requirement.

<div class="row g-3">
    <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Firstname" aria-label="First-Name">
    </div><!--end col-->
    <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Lastname" aria-label="Last-Name">
    </div><!--end col-->
    <div class="col-sm-4">
        <input type="text" class="form-control" placeholder="Email id" aria-label="Email Id">
    </div><!--end col-->
    <div class="col-sm-4">
        <input type="password" class="form-control" placeholder="Password" aria-label="Password">
    </div><!--end col-->
    <div class="col-sm-4">
        <input type="password" class="form-control" placeholder="Confirm Password" aria-label="confirm-password">
    </div><!--end col-->
    <div class="col-sm-7">
        <input type="text" class="form-control" placeholder="City" aria-label="City">
    </div><!--end col-->
    <div class="col-sm">
        <input type="text" class="form-control" placeholder="State" aria-label="State">
    </div><!--end col-->
    <div class="col-sm">
        <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
    </div><!--end col-->
</div><!--end row-->

Auto Sizing

Change col class to col-auto class so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.

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

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

Inline Forms

Use row-cols-* class to set form inline.

@
<form action="javascript:void(0);">
    <div class="row row-cols-lg-auto g-3 align-items-center">
        <div class="col-12">
            <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
            <div class="input-group">
                <div class="input-group-text">@</div>
                <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
            </div>
        </div><!--end col-->
        <div class="col-12">
            <label class="visually-hidden" 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><!--end col-->
        <div class="col-12">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="inlineFormCheck">
                <label class="form-check-label" for="inlineFormCheck">
                    Remember me
                </label>
            </div>
        </div><!--end col-->
        <div class="col-12">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div><!--end col-->
    </div><!--end row-->
</form>

Floating Labels

Use form-floating class to enable floating labels with Bootstrap’s textual form fields.

<form action="#">
    <div class="row g-3">
        <div class="col-lg-6">
            <div class="form-floating">
                <input type="text" class="form-control" id="firstnamefloatingInput" placeholder="Enter your firstname">
                <label for="firstnamefloatingInput">First Name</label>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-floating">
                <input type="text" class="form-control" id="lastnamefloatingInput" placeholder="Enter your Lastname">
                <label for="lastnamefloatingInput">Last Name</label>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-floating">
                <input type="email" class="form-control" id="emailfloatingInput" placeholder="Enter your email">
                <label for="emailfloatingInput">Email Address</label>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-floating">
                <input type="password" class="form-control" id="passwordfloatingInput" placeholder="Enter your password">
                <label for="passwordfloatingInput">Password</label>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-floating">
                <input type="password" class="form-control" id="passwordfloatingInput1" placeholder="Confirm password">
                <label for="passwordfloatingInput1">Confirm Password</label>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-floating">
                <input type="text" class="form-control" id="cityfloatingInput" placeholder="Enter your city">
                <label for="cityfloatingInput">City</label>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-floating">
                <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
                  <option selected>USA</option>
                  <option value="1">Brazil</option>
                  <option value="2">France</option>
                  <option value="3">Germany</option>
                </select>
                <label for="floatingSelect">Country</label>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="form-floating">
                <input type="number" class="form-control" id="zipfloatingInput" placeholder="Enter your zipcode">
                <label for="zipfloatingInput">Zipcode</label>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="text-end">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</form>
© Bluella.
Design & Develop by Bluella Private Limited