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).
<Col md={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>
</Col>
<Col md={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>
</Col>
<Col md={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>
</Col>
<Col md={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>
</Col>
<Col md={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>
</Col>
<Col md={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>
</Col>
<Col md={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>
</Col>
<Col md={6}>
<div class="mb-3">
<Label for="ForminputState" class="form-label">State</Label>
<select id="ForminputState" class="form-select" data-choices data-choices-sorting="true" >
<option>Choose...</option>
<option>...</option>
</select>
</div>
</Col>
<Col md={12}>
<div class="text-end">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</Col>
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).
<Col md={12}>
<Label for="fullnameInput" class="form-label">Name</Label>
<Input type="text" class="form-control" id="fullnameInput" placeholder="Enter your name"/>
</Col>
<Col md={6}>
<Label for="inputEmail4" class="form-label">Email</Label>
<Input type="email" class="form-control" id="inputEmail4" placeholder="Email"/>
</Col>
<Col md={6}>
<Label for="inputPassword4" class="form-label">Password</Label>
<Input type="password" class="form-control" id="inputPassword4" placeholder="Password"/>
</Col>
<Col xs={12}>
<Label for="inputAddress" class="form-label">Address</Label>
<Input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"/>
</Col>
<Col xs={12}>
<Label for="inputAddress2" class="form-label">Address 2</Label>
<Input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"/>
</Col>
<Col md={6}>
<Label for="inputCity" class="form-label">City</Label>
<Input type="text" class="form-control" id="inputCity" placeholder="Enter your city"/>
</Col>
<Col md={4}>
<Label for="inputState" class="form-label">State</Label>
<select id="inputState" class="form-select" data-choices data-choices-sorting="true">
<option selected>Choose...</option>
<option>...</option>
</select>
</Col>
<Col md={2}>
<Label for="inputZip" class="form-label">Zip</Label>
<Input type="text" class="form-control" id="inputZip" placeholder="Zin code"/>
</Col>
<Col xs={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>
</Col>
<Col xs={12}>
<div class="text-end">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</Col>
Vertical Form
<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>
<Flatpickr
class="form-control"
options={{
dateFormat: "d M, Y"
}}
/>
</div>
<div class="mb-3">
<Label for="EndleaveDate" class="form-label">End Leave Date</Label>
<Flatpickr
class="form-control"
options={{
dateFormat: "d M, Y"
}}
/>
</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>
Horizontal Form
<Row class="mb-3">
<Col lg={3} >
<Label for="nameInput" class="form-label">Name</Label>
</Col>
<Col lg={9} >
<Input type="text" class="form-control" id="nameInput" placeholder="Enter your name"/>
</Col>
</Row>
<Row class="mb-3">
<Col lg={3} >
<Label for="websiteUrl" class="form-label">Website URL</Label>
</Col>
<Col lg={9} >
<Input type="url" class="form-control" id="websiteUrl" placeholder="Enter your url"/>
</Col>
</Row>
<Row class="mb-3">
<Col lg={3} >
<Label for="dateInput" class="form-label">Date</Label>
</Col>
<Col lg={9} >
<Flatpickr
class="form-control"
options={{
dateFormat: "d M, Y"
}}
/>
</Col>
</Row>
<Row class="mb-3">
<Col lg={3} >
<Label for="timeInput" class="form-label">Time</Label>
</Col>
<Col lg={9} >
<Flatpickr
class="form-control"
options={{
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
}}
/>
</Col>
</Row>
<Row class="mb-3">
<Col lg={3} >
<Label for="leaveemails" class="form-label">Email Id</Label>
</Col>
<Col lg={9} >
<Input type="email" class="form-control" id="leaveemails" placeholder="Enter your email"/>
</Col>
</Row>
<Row class="mb-3">
<Col lg={3} >
<Label for="contactNumber" class="form-label">Contact Number</Label>
</Col>
<Col lg={9} >
<Input type="number" class="form-control" id="contactNumber" placeholder="+91 9876543210"/>
</Col>
</Row>
<Row class="mb-3">
<Col lg={3} >
<Label for="meassageInput" class="form-label">Message</Label>
</Col>
<Col lg={9} >
<textarea class="form-control" id="meassageInput" rows="3" placeholder="Enter your message"></textarea>
</Col>
</Row>
<div class="text-end">
<button type="submit" class="btn btn-primary">Add Leave</button>
</div>
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 xxl={4}>
<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>
</Row>
</Col>
<Col xxl={4}>
<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>
</Row>
</Col>
<Col xxl={4}>
<Row>
<Label for="colFormLabelLg" 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="colFormLabelLg" placeholder="col-form-label-lg"/>
</div>
</Row>
</Col>
Column Sizing
Use sm=required size size value to set
column size as per your requirement.
<Col sm={6}>
<Input type="text" class="form-control" placeholder="Firstname" aria-label="First-Name"/>
</Col>
<Col sm={6}>
<Input type="text" class="form-control" placeholder="Lastname" aria-label="Last-Name"/>
</Col>
<Col sm={4}>
<Input type="text" class="form-control" placeholder="Email id" aria-label="Email Id"/>
</Col>
<Col sm={4}>
<Input type="password" class="form-control" placeholder="Password" aria-label="Password"/>
</Col>
<Col sm={4}>
<Input type="password" class="form-control" placeholder="Confirm Password" aria-label="confirm-password"/>
</Col>
<Col sm={7}>
<Input type="text" class="form-control" placeholder="City" aria-label="City"/>
</Col>
<Col sm>
<Input type="text" class="form-control" placeholder="State" aria-label="State"/>
</Col>
<Col sm>
<Input type="text" class="form-control" placeholder="Zip" aria-label="Zip"/>
</Col>
Auto Sizing
<Form action="#">
<Row class="gy-2 gx-3 mb-3 align-items-center">
<Col sm>
<Label class="visually-hidden" for="autoSizingInput">Name</Label>
<Input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe"/>
</Col>
<Col sm>
<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>
</Col>
<Col sm>
<Label class="visually-hidden" for="autoSizingSelect">Preference</Label>
<select class="form-select" data-choices data-choices-sorting="true" id="autoSizingSelect">
<option >Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</Col>
<Col class="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>
</Col>
<Col class="sm-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</Col>
</Row>
</Form>
<Form>
<Row class="gx-3 gy-2 align-items-center">
<Col sm={3}>
<Label class="visually-hidden" for="specificSizeInputName">Name</Label>
<Input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe"/>
</Col>
<Col sm={3}>
<Label class="visually-hidden" for="specificSizeInputGroupUsername">Username</Label>
<InputGroup>
<div class="input-group-text">@</div>
<Input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username"/>
</InputGroup>
</Col>
<Col sm={3}>
<Label class="visually-hidden" for="specificSizeSelect">Preference</Label>
<select class="form-select" data-choices data-choices-sorting="true" id="specificSizeSelect">
<option >Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</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>
<Col >
<button type="submit" class="btn btn-primary">Submit</button>
</Col>
</Row>
</Form>
Inline Forms
Use row-cols-* class to set form inline.
<Row class="row-cols-lg-auto g-3 align-items-center">
<Col xs={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>
</Col>
<Col xs={12}>
<Label class="visually-hidden" for="inlineFormSelectPref">Preference</Label>
<select class="form-select" data-choices data-choices-sorting="true" id="inlineFormSelectPref">
<option >Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</Col>
<Col xs={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>
</Col>
<Col xs={12}>
<button type="submit" class="btn btn-primary">Submit</button>
</Col>
</Row>
Floating Labels
Use form-floating class to enable floating
labels with Bootstrap’s textual form fields.
<Form action="#">
<Row class="g-3">
<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>
</Col>
<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>
</Col>
<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>
</Col>
<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>
</Col>
<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>
</Col>
<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>
</Col>
<Col lg={4}>
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option >Choose...</option>
<option value="1">USA</option>
<option value="2">Brazil</option>
<option value="3">France</option>
<option value="4">Germany</option>
</select>
<Label for="floatingSelect">Country</Label>
</div>
</Col>
<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>
</Col>
<Col lg={12}>
<div class="text-end">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</Col>
</Row>
</Form>