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).
Next.js Preview
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).
Next.js Preview
Vertical Form
Example of vertical form using form-control class. No need to specify row and col class to create vertical form.
Next.js Preview
Horizontal Form
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.
Next.js Preview
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.
Next.js Preview
Column Sizing
Use col-sm- class with required size value to set column size as per your requirement.
Next.js Preview
Auto Sizing
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.
Next.js Preview
Inline Forms
Use row-cols-* class to set form inline.
Next.js Preview
Floating Labels
Use form-floating class to enable floating labels with Bootstrap’s textual form fields.