Form Picker
Basic Example
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.
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 .col-form-label to your <label>s as well so
they’re vertically centered with their associated form controls.
Inline Form
Use the .row-cols-lg-auto, .g-3 & .align-items-center class
to display a series of labels, form controls, and buttons on a single horizontal row. Form controls
within inline forms vary slightly from their default states. Controls only appear inline in
viewports that are at least 576px wide to account for narrow viewports on mobile devices.
Auto-sizing
Horizontal form label sizing
Be sure to use .col-form-label-sm or .col-form-label-lg
to your <label>s or <legend>s to correctly follow the size of
.form-control-lg and .form-control-sm.
Form Row
By adding .row & .g-2, you can have control over the gutter width in as
well the inline as block direction.