Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to add layouts to forms with Bootstrap 5.
Horizontal Form Label Sizing
We can change the sizing of form fields with the col-form-label-sm and col-form-label-lg classes.
They can be applied to the form labels and legends.
The size should match the size of the form control, which can be set with the form-control-lg and form-control-sm classes.
For example, we can write:
<div class="row mb-3">
<label for="small" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="small" placeholder="small">
</div>
</div>
<div class="row mb-3">
<label for="medium" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="medium" placeholder="medium">
</div>
</div>
<div class="row">
<label for="large" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="large" placeholder="large">
</div>
</div>
Column Sizing
The columns can be sized with the .col and .row classes.
For example, we can write:
<div class="row g-3">
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="Region">
</div>
<div class="col-sm">
<input type="text" class="form-control" placeholder="Postal code">
</div>
</div>
We add the col-sm-6 and col-sm classes to set the column widths if the breakpoint is sm or wider.
g-3 add some gutters between the input boxes.
Auto-Sizing
To change the size of form fields automatically, we can use the col and col-auto classes to size the columns.
For example, we can write:
<form class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="james smith">
</div>
<div class="col-auto">
<label class="sr-only" for="username">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
</div>
<div class="col-auto">
<label class="sr-only" for="fruit">Fruit</label>
<select class="form-select" id="fruit">
<option selected>Choose...</option>
<option value="1">apple</option>
<option value="2">orange</option>
<option value="3">grape</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="agree">
<label class="form-check-label" for="agree">
I agree
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
We have multiple fields displayed side by side because we have the col-sm-3 and col-auto classes to size the columns.
They let us display the form fields side by side if we hit the sm breakpoint or wider.
Inline Forms
We can make forms inline with the .align-items-center to align the form elements to the middle.
The gutter is added with the g-3 class.
For example, we have:
`<form class="`row row-cols-md-auto g-3 align-items-center`">
<div class="col-12">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="james smith">
</div>`
<div class="col-12">
<label class="sr-only" for="username">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
</div>
<div class="col-12">
<label class="sr-only" for="fruit">Fruit</label>
<select class="form-select" id="fruit">
<option selected>Choose...</option>
<option value="1">apple</option>
<option value="2">orange</option>
<option value="3">grape</option>
</select>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="agree">
<label class="form-check-label" for="agree">
I agree
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Validation
Bootstrap 5 provides us with classes to display validation status for our form.
It scopes the styles for :invalid and :valid styles to the parent .was-validate class.
Also, it resets the appearance of the form.
The .was-validated class would be removed from the form after submission.
.is-invalid and .is-valid can be used as a fallback for pseudoclasses.
Custom Styles
If we want to show custom validation messages, we need the novalidate boolean attribute to our form.
It disables the browser default feedback tooltips but still let us use the form validation API in JavaScript.
When we try to submit, we’ll have the :invalid and :valid styles applied to the form controls.
Conclusion
We can size columns to the way we want to add layouts to forms.