Bootstrap 5 Checkboxes and Radio Buttons Without Labels

Bootstrap 5 provides several ways to create forms and input fields. For checkboxes and radio buttons, you can create them without labels using the following methods:

Using the “form-check” class:

You can create a checkbox or radio button without a label by using the “form-check” class. Here’s an example:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
</div>

The “form-check-input” class is used to style the input field, and the “id” attribute is used to associate the label with the input field (if you decide to add a label later).

Using the “form-check-inline” class:

If you want to create inline checkboxes or radio buttons without labels, you can use the “form-check-inline” class. Here’s an example:

<div class="form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
</div>

The “form-check-inline” class is used to create the inline layout, and the “name” attribute is used to group the radio buttons together.

Note that in both cases, you can still add a label later using the “for” attribute and the “id” attribute. For example:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    This is a checkbox without a label
  </label>
</div>

In this example, the “for” attribute of the label matches the “id” attribute of the input field.

Tags: Bootstrap 5, Checkboxes, forms, Input Fields, labels, Radio Buttons