Explore Our Templates 🚀
Form Element
Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
Utilities
We recommend sticking to margin-bottom utilities, and using a single direction throughout the form for consistency.
<div class="mb-3">
<label for="formGroupExampleInput" class="form-label">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div>
<label for="formGroupExampleInput2" class="form-label">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div><template>
<BCol>
<BFormGroup
id="input-group-1"
label="Example label"
label-for="formGroupExampleInput"
class="mb-3"
>
<BFormInput
id="formGroupExampleInput"
type="text"
placeholder="Example input placeholder"
/>
</BFormGroup>
<BFormGroup
id="input-group-2"
label="Another label"
label-for="formGroupExampleInput2"
>
<BFormInput
id="formGroupExampleInput2"
type="text"
placeholder="Another input placeholder"
/>
</BFormGroup>
</BCol>
</template><template>
<BCol>
<BFormGroup
id="input-group-1"
label="Example label"
label-for="formGroupExampleInput"
class="mb-3"
>
<BFormInput
id="formGroupExampleInput"
type="text"
placeholder="Example input placeholder"
/>
</BFormGroup>
<BFormGroup
id="input-group-2"
label="Another label"
label-for="formGroupExampleInput2"
>
<BFormInput
id="formGroupExampleInput2"
type="text"
placeholder="Another input placeholder"
/>
</BFormGroup>
</BCol>
</template><div class="mb-3">
<label for="formGroupExampleInput" class="form-label">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div>
<label for="formGroupExampleInput2" class="form-label">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>Form grid
More complex forms can be built using the grid components. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div><template>
<BRow>
<BCol>
<BFormInput placeholder="First name" aria-label="First name" />
</BCol>
<BCol>
<BFormInput placeholder="Last name" aria-label="Last name" />
</BCol>
</BRow>
</template><template>
<BRow>
<BCol>
<BFormInput placeholder="First name" aria-label="First name" />
</BCol>
<BCol>
<BFormInput placeholder="Last name" aria-label="Last name" />
</BCol>
</BRow>
</template><div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
</div>
</div>Complex Form Grid
More complex layouts can also be created with the grid system.
<form class="row g-3">
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</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">
</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">
</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">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form><template>
<BForm class="row g-3" @submit.stop.prevent>
<BCol md="6">
<BFormGroup id="input-group-4" label="Email" label-for="inputEmail4">
<BFormInput id="inputEmail4" type="email" />
</BFormGroup>
</BCol>
<BCol md="6">
<BFormGroup id="input-group-5" label="Password" label-for="inputPassword4">
<BFormInput id="inputPassword4" type="password" />
</BFormGroup>
</BCol>
<BCol cols="12" >
<BFormGroup id="input-group-6" label="Address" label-for="inputAddress">
<BFormInput id="inputAddress" type="text" placeholder="1234 Main St" />
</BFormGroup>
</BCol>
<BCol cols="12" >
<BFormGroup id="input-group-7" label="Address 2" label-for="inputAddress2">
<BFormInput id="inputAddress2" type="text" placeholder="Apartment, studio, or floor" />
</BFormGroup>
</BCol>
<BCol md="6">
<BFormGroup id="input-group-8" label="City" label-for="inputCity">
<BFormInput id="inputCity" type="text" />
</BFormGroup>
</BCol>
<BCol md="4">
<BFormGroup id="input-group-9" label="State" label-for="inputState">
<BFormSelect id="inputState" model-value="selected">
<BFormSelectOption value="selected">Choose..</BFormSelectOption>
<BFormSelectOption value="1">...</BFormSelectOption>
</BFormSelect>
</BFormGroup>
</BCol>
<BCol md="2">
<BFormGroup id="input-group-10" label="Zip" label-for="inputZip">
<BFormInput id="inputZip" type="text" />
</BFormGroup>
</BCol>
<BCol cols="12" >
<BFormCheckbox value="me">Check me out</BFormCheckbox>
</BCol>
<BCol cols="12" >
<BButton type="submit" variant="primary">Sign in</BButton>
</BCol>
</BForm>
</template><template>
<BForm class="row g-3" @submit.stop.prevent>
<BCol md="6">
<BFormGroup id="input-group-4" label="Email" label-for="inputEmail4">
<BFormInput id="inputEmail4" type="email" />
</BFormGroup>
</BCol>
<BCol md="6">
<BFormGroup id="input-group-5" label="Password" label-for="inputPassword4">
<BFormInput id="inputPassword4" type="password" />
</BFormGroup>
</BCol>
<BCol cols="12" >
<BFormGroup id="input-group-6" label="Address" label-for="inputAddress">
<BFormInput id="inputAddress" type="text" placeholder="1234 Main St" />
</BFormGroup>
</BCol>
<BCol cols="12" >
<BFormGroup id="input-group-7" label="Address 2" label-for="inputAddress2">
<BFormInput id="inputAddress2" type="text" placeholder="Apartment, studio, or floor" />
</BFormGroup>
</BCol>
<BCol md="6">
<BFormGroup id="input-group-8" label="City" label-for="inputCity">
<BFormInput id="inputCity" type="text" />
</BFormGroup>
</BCol>
<BCol md="4">
<BFormGroup id="input-group-9" label="State" label-for="inputState">
<BFormSelect id="inputState" model-value="selected">
<BFormSelectOption value="selected">Choose..</BFormSelectOption>
<BFormSelectOption value="1">...</BFormSelectOption>
</BFormSelect>
</BFormGroup>
</BCol>
<BCol md="2">
<BFormGroup id="input-group-10" label="Zip" label-for="inputZip">
<BFormInput id="inputZip" type="text" />
</BFormGroup>
</BCol>
<BCol cols="12" >
<BFormCheckbox value="me">Check me out</BFormCheckbox>
</BCol>
<BCol cols="12" >
<BButton type="submit" variant="primary">Sign in</BButton>
</BCol>
</BForm>
</template><form class="row g-3">
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</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">
</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">
</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">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>Horizontal form
Create horizontal forms with the grid by adding as=Row to form groups and using Col to specify the width of your labels and controls. Be sure to add the column prop to your FormLabels as well so they’re vertically centered with their associated form controls.
At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the padding-top on our stacked radio inputs label to better align the text baseline.
<form class="row g-3">
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</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">
</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">
</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">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form><template>
<BForm @submit.stop.prevent>
<BRow class="mb-3">
<BCol sm="2">
<label for="inputEmail3" class="col-form-label">Email</label>
</BCol>
<BCol sm="10">
<BFormInput type="email" id="inputEmail3" />
</BCol>
</BRow>
<BRow class="mb-3">
<BCol sm="2">
<label for="inputPassword3" class="col-form-label">Password</label>
</BCol>
<BCol sm="10">
<BFormInput type="password" id="inputPassword3" />
</BCol>
</BRow>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<BCol sm="10">
<BFormRadioGroup id="gridRadios" name="gridRadios">
<BFormRadio value="option1">First radio</BFormRadio>
<BFormRadio value="option2">Second radio</BFormRadio>
<BFormRadio value="option3" disabled>Third disabled radio</BFormRadio>
</BFormRadioGroup>
</BCol>
</fieldset>
<BRow class="mb-3">
<BCol sm="10" offset-sm="2">
<BFormCheckbox value="me">Example checkbox</BFormCheckbox>
</BCol>
</BRow>
<BButton type="submit" variant="primary">Sign in</BButton>
</BForm>
</template><template>
<BForm @submit.stop.prevent>
<BRow class="mb-3">
<BCol sm="2">
<label for="inputEmail3" class="col-form-label">Email</label>
</BCol>
<BCol sm="10">
<BFormInput type="email" id="inputEmail3" />
</BCol>
</BRow>
<BRow class="mb-3">
<BCol sm="2">
<label for="inputPassword3" class="col-form-label">Password</label>
</BCol>
<BCol sm="10">
<BFormInput type="password" id="inputPassword3" />
</BCol>
</BRow>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<BCol sm="10">
<BFormRadioGroup id="gridRadios" name="gridRadios">
<BFormRadio value="option1">First radio</BFormRadio>
<BFormRadio value="option2">Second radio</BFormRadio>
<BFormRadio value="option3" disabled>Third disabled radio</BFormRadio>
</BFormRadioGroup>
</BCol>
</fieldset>
<BRow class="mb-3">
<BCol sm="10" offset-sm="2">
<BFormCheckbox value="me">Example checkbox</BFormCheckbox>
</BCol>
</BRow>
<BButton type="submit" variant="primary">Sign in</BButton>
</BForm>
</template><form class="row g-3">
<div class="col-md-6">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="col-md-6">
<label for="inputPassword4" class="form-label">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</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">
</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">
</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">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>Inline forms
Set column width in Row just like - <Row lg='auto'> to create responsive horizontal layouts.
<form 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>
<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>
<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>
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form><template>
<BForm class="row row-cols-lg-auto g-3 align-items-center">
<BCol cols="12">
<BInputGroup>
<BInputGroupText tag="label" for="inlineFormInputGroupUsername">
@
</BInputGroupText>
<BFormInput
id="inlineFormInputGroupUsername"
type="text"
placeholder="Username"
/>
</BInputGroup>
</BCol>
<BCol cols="12">
<label class="visually-hidden" for="inlineFormSelectPref">
Preference
</label>
<BFormSelect id="inlineFormSelectPref" model-value="selected">
<BFormSelectOption value="selected">Choose..</BFormSelectOption>
<BFormSelectOption value="1">One</BFormSelectOption>
<BFormSelectOption value="2">Two</BFormSelectOption>
<BFormSelectOption value="3">Three</BFormSelectOption>
</BFormSelect>
</BCol>
<BCol cols="12">
<BFormCheckbox>Remember me</BFormCheckbox>
</BCol>
<BCol cols="12">
<BButton type="submit" variant="primary">Submit</BButton>
</BCol>
</BForm>
</template><template>
<BForm class="row row-cols-lg-auto g-3 align-items-center">
<BCol cols="12">
<BInputGroup>
<BInputGroupText tag="label" for="inlineFormInputGroupUsername">
@
</BInputGroupText>
<BFormInput
id="inlineFormInputGroupUsername"
type="text"
placeholder="Username"
/>
</BInputGroup>
</BCol>
<BCol cols="12">
<label class="visually-hidden" for="inlineFormSelectPref">
Preference
</label>
<BFormSelect id="inlineFormSelectPref" model-value="selected">
<BFormSelectOption value="selected">Choose..</BFormSelectOption>
<BFormSelectOption value="1">One</BFormSelectOption>
<BFormSelectOption value="2">Two</BFormSelectOption>
<BFormSelectOption value="3">Three</BFormSelectOption>
</BFormSelect>
</BCol>
<BCol cols="12">
<BFormCheckbox>Remember me</BFormCheckbox>
</BCol>
<BCol cols="12">
<BButton type="submit" variant="primary">Submit</BButton>
</BCol>
</BForm>
</template><form 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>
<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>
<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>
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>Form with icon
Place an icon inside add-on on either side of an input. You may also place one on right side of an input.
<form>
<div class="form-group">
<label class="form-label" for="exampleInputuname_1">User Name</label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" id="exampleInputuname_1" placeholder="Username">
</div>
</div>
<div class="form-group">
<label class="form-label" for="exampleInputEmail_1">Email address</label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-inbox"></i></span>
<input type="email" class="form-control" id="exampleInputEmail_1" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="form-label" for="exampleInputpwd_1">Password</label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-lock"></i></span>
<input type="password" class="form-control" id="exampleInputpwd_1" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="form-label" for="exampleInputpwd_2">Confirm Password</label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-lock"></i></span>
<input type="password" class="form-control" id="exampleInputpwd_2" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="form-label">Gender</label>
<div>
<div class="form-check mb-1">
<input id="radio_1" name="radio1" class="form-check-input" checked="" type="radio">
<label class="form-check-label" for="radio_1">M</label>
</div>
<div class="form-check">
<input id="radio_2" name="radio1" class="form-check-input" checked="" type="radio">
<label class="form-check-label" for="radio_1">F</label>
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" id="checkbox_1" type="checkbox" checked>
<label class="form-check-label" for="checkbox_1">Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-primary me-1">Submit</button>
<button type="submit" class="btn btn-light">Cancel</button>
</form><template>
<BForm>
<BFormGroup
id="input-group-11"
label="User Name"
label-for="exampleInputuname_1"
>
<BInputGroup class="mb-3">
<BInputGroupText><i class="fa fa-user"></i></BInputGroupText>
<BFormInput id="exampleInputuname_1" placeholder="Username" />
</BInputGroup>
</BFormGroup>
<BFormGroup
id="input-group-12"
label="Email address"
label-for="exampleInputEmail_1"
>
<BInputGroup class="mb-3">
<BInputGroupText>
<i class="fa fa-inbox"></i>
</BInputGroupText>
<BFormInput
id="exampleInputEmail_1"
type="email"
placeholder="Enter email"
/>
</BInputGroup>
</BFormGroup>
<BFormGroup
id="input-group-13"
label="Password"
label-for="exampleInputpwd_1"
>
<BInputGroup class="mb-3">
<BInputGroupText>
<i class="fa fa-lock"></i>
</BInputGroupText>
<BFormInput
id="exampleInputpwd_1"
type="password"
placeholder="Password"
/>
</BInputGroup>
</BFormGroup>
<BFormGroup
id="input-group-14"
label="Confirm Password"
label-for="exampleInputpwd_2"
>
<BInputGroup class="mb-3">
<BInputGroupText>
<i class="fa fa-lock"></i>
</BInputGroupText>
<BFormInput
id="exampleInputpwd_2"
type="password"
placeholder="Confirm Password"
/>
</BInputGroup>
</BFormGroup>
<BFormGroup id="input-group-15" label="Gender" label-for="genderRadios">
<BFormRadio name="genderRadios" value="Male">M</BFormRadio>
<BFormRadio name="genderRadios" value="Female">F</BFormRadio>
</BFormGroup>
<BFormGroup>
<BFormCheckbox>Remember me</BFormCheckbox>
</BFormGroup>
<BButton type="submit" variant="primary">Submit</BButton>
<BButton type="reset" variant="light">Cancel</BButton>
</BForm>
</template><template>
<BForm>
<BFormGroup
id="input-group-11"
label="User Name"
label-for="exampleInputuname_1"
>
<BInputGroup class="mb-3">
<BInputGroupText><i class="fa fa-user"></i></BInputGroupText>
<BFormInput id="exampleInputuname_1" placeholder="Username" />
</BInputGroup>
</BFormGroup>
<BFormGroup
id="input-group-12"
label="Email address"
label-for="exampleInputEmail_1"
>
<BInputGroup class="mb-3">
<BInputGroupText>
<i class="fa fa-inbox"></i>
</BInputGroupText>
<BFormInput
id="exampleInputEmail_1"
type="email"
placeholder="Enter email"
/>
</BInputGroup>
</BFormGroup>
<BFormGroup
id="input-group-13"
label="Password"
label-for="exampleInputpwd_1"
>
<BInputGroup class="mb-3">
<BInputGroupText>
<i class="fa fa-lock"></i>
</BInputGroupText>
<BFormInput
id="exampleInputpwd_1"
type="password"
placeholder="Password"
/>
</BInputGroup>
</BFormGroup>
<BFormGroup
id="input-group-14"
label="Confirm Password"
label-for="exampleInputpwd_2"
>
<BInputGroup class="mb-3">
<BInputGroupText>
<i class="fa fa-lock"></i>
</BInputGroupText>
<BFormInput
id="exampleInputpwd_2"
type="password"
placeholder="Confirm Password"
/>
</BInputGroup>
</BFormGroup>
<BFormGroup id="input-group-15" label="Gender" label-for="genderRadios">
<BFormRadio name="genderRadios" value="Male">M</BFormRadio>
<BFormRadio name="genderRadios" value="Female">F</BFormRadio>
</BFormGroup>
<BFormGroup>
<BFormCheckbox>Remember me</BFormCheckbox>
</BFormGroup>
<BButton type="submit" variant="primary">Submit</BButton>
<BButton type="reset" variant="light">Cancel</BButton>
</BForm>
</template><form>
<div class="form-group">
<label class="form-label" for="exampleInputuname_1">User Name</label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" id="exampleInputuname_1" placeholder="Username">
</div>
</div>
<div class="form-group">
<label class="form-label" for="exampleInputEmail_1">Email address</label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-inbox"></i></span>
<input type="email" class="form-control" id="exampleInputEmail_1" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="form-label" for="exampleInputpwd_1">Password</label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-lock"></i></span>
<input type="password" class="form-control" id="exampleInputpwd_1" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="form-label" for="exampleInputpwd_2">Confirm Password</label>
<div class="input-group">
<span class="input-group-text"><i class="fa fa-lock"></i></span>
<input type="password" class="form-control" id="exampleInputpwd_2" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="form-label">Gender</label>
<div>
<div class="form-check mb-1">
<input id="radio_1" name="radio1" class="form-check-input" checked="" type="radio">
<label class="form-check-label" for="radio_1">M</label>
</div>
<div class="form-check">
<input id="radio_2" name="radio1" class="form-check-input" checked="" type="radio">
<label class="form-check-label" for="radio_1">F</label>
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" id="checkbox_1" type="checkbox" checked>
<label class="form-check-label" for="checkbox_1">Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-primary me-1">Submit</button>
<button type="submit" class="btn btn-light">Cancel</button>
</form>