Bootstrap 5 Checks and radios Inline

Bootstrap 5 Checks and radios Inline can be used to align the checkbox or radio horizontally in the same line.

Bootstrap 5 Checks and radios Inline Class:

• form-check-inline: This class makes all the checkboxes or radios inline or beside each other which are inside the div having this class.

Syntax:

<div class="form-check form-check-inline">
 ...
</div>

Example 1: This code below demonstrates how we can implement the checkboxes inline and show different toggle states:

Output:

👁 Bootstrap 5 Checks and radios Inline

Example 2: This code below demonstrates how we can implement the radio inputs inline and show different toggle states the first two radio inputs are for the same input and the other two are for different:

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.1/forms/checks-radios/#inline