Form layout | Velzon - Admin & Dashboard Template

#### Are you sure ?

Are you sure you want to remove this Notification ?

#### Form Layout

#### Form Grid

Show Code

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).

First Name
Last Name
Company Name
Phone Number
Email Address
Address
City
State

    <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

Show Code

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).

Name
Email
Password
Address
Address 2
City
State
Zip
Check me out

    <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

Show Code

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

Employee Name
Employee Department URL
Start Leave Date
End Leave Date
Message

    <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

Show Code

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.

Name
Website URL
Date
Time
Email Id
Contact Number
Message

    <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

Show Code

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.

Email
Email
Email

    <!-- 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

Show Code

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

Show Code

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.

Name
Username
@
Preference
Remember me
Name
Username
@
Preference
Remember me

    <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

Show Code

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

Username
@
Preference
Remember me

    <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

Show Code

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

First Name
Last Name
Email Address
Password
Confirm Password
City
Country
Zipcode

    <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>

Loading...

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### Semi Box

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark

###### Background Image

Choose a body background image.

##### None

##### One

##### Two

##### Three