Form Layout
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.
<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>
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.
<template>
<BRow>
<BCol>
<BFormInput placeholder="First name" aria-label="First name" />
</BCol>
<BCol>
<BFormInput placeholder="Last name" aria-label="Last name" />
</BCol>
</BRow>
</template>
Gutters
y adding gutter modifier classes, you can have control over the gutter width in as well the inline as block direction.
<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>
Horizontal form
reate horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls.
<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>
Inline forms
Use the .row-cols-* classes to create responsive horizontal layouts. By adding gutter modifier classes, we’ll have gutters in horizontal and vertical directions.
<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 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.
<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>