Utilities
Margin utilities are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to margin-bottom utilities, and using a single direction throughout the form for consistency.
<template>
<b-div margin="b-3">
<BFormLabel for="formGroupExampleInput">
Example label
</BFormLabel>
<BFormInput
id="formGroupExampleInput"
type="text"
placeholder="Example input placeholder"
/>
</b-div>
<b-div margin="b-3">
<BFormLabel for="formGroupExampleInput2">
Another label
</BFormLabel>
<BFormInput
id="formGroupExampleInput2"
type="text"
placeholder="Another input placeholder"
/>
</b-div>
</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>
<Row>
<Col>
<BFormInput
type="text"
placeholder="First name"
aria-label="First name"
/>
</Col>
<Col>
<BFormInput
type="text"
placeholder="Last name"
aria-label="Last name"
/>
</Col>
</Row>
</template>
Gutters
gutter modifer classes , you can have control over the gutter width in as well the inline as block direction.
<template>
<Row gutter="3">
<Col>
<BFormInput
type="text"
placeholder="First name"
aria-label="First name"
/>
</Col>
<Col>
<BFormInput
type="text"
placeholder="Last name"
aria-label="Last name"
/>
</Col>
</Row>
</template>
More complex layouts can also be created with the grid system.
<template>
<BForm>
<Row gutter="3">
<Col col="md-6">
<BFormLabel for="inputEmail4">
Email
</BFormLabel>
<BFormInput
id="inputEmail4"
type="email"
/>
</Col>
<Col col="md-6">
<BFormLabel for="inputPassword4">
Password
</BFormLabel>
<BFormInput
id="inputPassword4"
type="password"
/>
</Col>
<Col col="12">
<BFormLabel for="inputAddress">
Address
</BFormLabel>
<BFormInput
id="inputAddress"
type="text"
placeholder="1234 Main St"
/>
</Col>
<Col col="12">
<BFormLabel for="inputAddress2">
Address 2
</BFormLabel>
<BFormInput
id="inputAddress2"
type="text"
placeholder="Apartment, studio, or floor"
/>
</Col>
<Col col="md-6">
<BFormLabel for="inputCity">
City
</BFormLabel>
<BFormInput
id="inputCity"
type="text"
/>
</Col>
<Col col="md-4">
<BFormLabel for="inputState">
State
</BFormLabel>
<BFormSelect id="inputState">
<option selected>
Choose...
</option>
<option>...</option>
</BFormSelect>
</Col>
<Col col="md-2">
<BFormLabel for="inputZip">
Zip
</BFormLabel>
<BFormInput
id="inputZip"
type="text"
/>
</Col>
<Col col="12">
<Col>
<BFormCheckInput
id="gridCheck"
type="checkbox"
/>
<BFormLabel for="gridCheck">
Check me out
</BFormLabel>
</Col>
</Col>
<Col col="12">
<b-button
type="submit"
color="primary"
>
Sign in
</b-button>
</Col>
</Row>
</BForm>
</template>
Horizontal form
Create 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. Be sure to add ColFormLabel 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.
<template>
<BForm>
<Row margin="b-3">
<BColFormLabel
for="inputEmail3"
col="sm-2"
>
Email
</BColFormLabel>
<Col col="sm-10">
<BFormInput
id="inputEmail3"
type="email"
/>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel
for="inputPassword3"
col="sm-2"
>
Password
</BColFormLabel>
<Col col="sm-10">
<BFormInput
id="inputPassword3"
type="password"
/>
</Col>
</Row>
<BFieldset>
<Row margin="b-3">
<BColFormLegend
col="sm-2"
padding="t-0"
>
Radios
</BColFormLegend>
<Col col="sm-10">
<BFormCheckInput
id="gridRadios1"
type="radio"
name="gridRadios"
value="option1"
checked
/>
<BFormLabel for="gridRadios1">
First radio
</BFormLabel>
<BFormCheckInput
id="gridRadios2"
type="radio"
name="gridRadios"
value="option2"
/>
<BFormLabel for="gridRadios2">
Second radio
</BFormLabel>
<BFormCheckInput
id="gridRadios3"
type="radio"
name="gridRadios"
value="option3"
disabled
/>
<BFormLabel for="gridRadios3">
Third disabled radio
</BFormLabel>
</Col>
</Row>
</BFieldset>
<Row margin="b-3">
<Col
col="sm-10"
offset="sm-2"
>
<BFormCheckInput
id="gridCheck1"
type="checkbox"
/>
<BFormLabel for="gridCheck1">
Example checkbox
</BFormLabel>
</Col>
</Row>
<b-button
type="submit"
color="primary"
>
Sign in
</b-button>
</BForm>
</template>
Horizontal form label sizing
Be sure to use size = "sm" or size = "lg" to your FormLabels or Legends to correctly follow the size of size = "lg" and size = "sm".
<template>
<Row margin="b-3">
<BColFormLabel
size="sm"
for="colFormLabelSm"
col="sm-2"
>
Email
</BColFormLabel>
<Col col="sm-10">
<BFormInput
id="colFormLabelSm"
type="email"
size="sm"
placeholder="col-form-label-sm"
/>
</Col>
</Row>
<Row margin="b-3">
<BColFormLabel col="sm-2">
Email
</BColFormLabel>
<Col col="sm-10">
<BFormInput
id="colFormLabel"
type="email"
placeholder="col-form-label"
/>
</Col>
</Row>
<Row>
<BColFormLabel
size="lg"
col="sm-2"
>
Email
</BColFormLabel>
<Col col="sm-10">
<BFormInput
id="colFormLabelLg"
type="email"
size="lg"
placeholder="col-form-label-lg"
/>
</Col>
</Row>
</template>
Column sizing
As shown in the previous examples, our grid system allows you to place any number of Cols within a Row.
They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining Cols equally split the rest, with specific column classes like col="sm-7".
<template>
<Row gutter="3">
<Col col="sm-7">
<BFormInput
type="text"
placeholder="City"
aria-label="City"
/>
</Col>
<Col col="sm">
<BFormInput
type="text"
placeholder="State"
aria-label="State"
/>
</Col>
<Col col="sm">
<BFormInput
type="text"
placeholder="Zip"
aria-label="Zip"
/>
</Col>
</Row>
</template>
Auto-sizing
The example below uses a flexbox utility to vertically center the contents and changes Colo col="auto" so that your columns only take up as much space as needed.
Put another way, the column sizes itself based on the contents.
<template>
<BForm>
<Row
gutter="gy-2 gx-3"
align-items="center"
>
<Col col="auto">
<!-- <label class="visually-hidden" for="autoSizingInput">Name</label> -->
<BFormLabel
visually="hidden"
for="autoSizingInput"
>
Name
</BFormLabel>
<BFormInput
id="autoSizingInput"
type="text"
placeholder="Jane Doe"
/>
</Col>
<Col col="auto">
<BFormLabel
visually="hidden"
for="autoSizingBInputGroup"
>
Name
</BFormLabel>
<div class="input-group">
<div class="input-group-text">
@
</div>
<input
id="autoSizingBInputGroup"
type="text"
class="form-control"
placeholder="Username"
/>
</div>
</Col>
<Col col="auto">
<BFormLabel
visually="hidden"
for="autoSizingSelect"
>
Name
</BFormLabel>
<!-- <label class="visually-hidden" for="autoSizingSelect">Preference</label> -->
<select
id="autoSizingSelect"
class="form-select"
>
<option selected>
Choose...
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
</select>
</Col>
<Col col="auto">
<b-button
type="submit"
class="btn btn-primary"
>
Submit
</b-button>
</Col>
</Row>
</BForm>
</template>
You can then remix that once again with size-specific column classes.
<template>
<BForm>
<Row
gutter="x-3 y-2"
align-items="center"
>
<Col col="sm-3">
<BFormLabel for="specificcolInputName">
Name
</BFormLabel>
<BFormInput
type="text"
placeholder="Jane Doe"
/>
</Col>
<Col col="sm-3">
<BFormLabel for="specificcolInputName">
Username
</BFormLabel>
<BFormInput
type="text"
placeholder="Username"
/>
</Col>
<Col col="sm-3">
<BFormLabel for="specificcolBInputGroupUsername">
Preference
</BFormLabel>
<BFormSelect id="specificcolSelect">
<option selected>
Choose...
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
</BFormSelect>
</Col>
<Col col="sm-3">
<BFormCheck>
<BFormCheckInput />
<BFormLabel>Remember me</BFormLabel>
</BFormCheck>
</Col>
<Col col="auto">
<b-button
type="submit"
color="primary"
>
Submit
</b-button>
</Col>
</Row>
</BForm>
</template>
Inline forms
Use the Row classes to create responsive horizontal layouts. By adding gutter modifier classes , we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the col=12 helps stack the form controls and more.
The align="item-center" aligns the form elements to the middle, making the FormCheckInput align properly.
<template>
<BForm>
<Row
size="lg-auto"
columuns="lg-auto"
align-item="center"
gutter="3"
>
<Col col="12">
<BFormLabel visually-hidden>
Username
</BFormLabel>
<BInputGroup>
<BInputGroupText>@</BInputGroupText>
<BFormInput
id="inlineFormBInputGroupUsername"
type="text"
placeholder="Username"
/>
</BInputGroup>
</Col>
<Col col="12">
<BFormSelect id="inlineFormSelectPref">
<option selected>
Choose...
</option>
<option value="1">
One
</option>
<option value="2">
Two
</option>
<option value="3">
Three
</option>
</BFormSelect>
</Col>
<Col col="12">
<BFormCheck>
<BFormCheckInput id="inlineFormCheck" />
<BFormLabel for="inlineFormCheck">
Remember me
</BFormLabel>
</BFormCheck>
</Col>
<Col col="12">
<b-button
type="submit"
color="primary"
>
Submit
</b-button>
</Col>
</Row>
</BForm>
</template>