Bootstrap 4 Inline Checkboxes

Effortlessly add inline checkboxes to your forms using Bootstrap 4. Learn how to organize checkbox options horizontally for a streamlined and compact form layout.

Enhance the layout and usability of your forms with Bootstrap 4 inline checkboxes. This guide will walk you through implementing and customizing inline checkboxes using Bootstrap 4, ensuring they integrate seamlessly with your website's design and functionality.

Step 1: Copy the Code Snippet

  • Start by copying the HTML code snippet provided above. This snippet includes the necessary structure and styles to create inline checkboxes using Bootstrap 4. Select the code, click the copy button, and paste it into your HTML file where you want the inline checkboxes to appear.

Step 2: Link Bootstrap CSS

  • Ensure Bootstrap's CSS is linked correctly in your HTML document. Add the following <link> tag in the <head> section to import Bootstrap's stylesheet:
  • <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  • This link fetches Bootstrap's CSS file from the official Bootstrap CDN, ensuring your inline checkboxes inherit Bootstrap's styling.

Step 3: Customize and Make it Yours

  • Personalize the inline checkboxes to align with your website's design and functionality requirements. Modify the checkbox labels, sizes, colors, and styles using Bootstrap's built-in classes or custom CSS. Implement validation, adjust spacing, or integrate with JavaScript for enhanced functionality tailored to your users' needs.

By following these steps, you can easily integrate and customize Bootstrap 4 inline checkboxes on your website, providing a streamlined and intuitive user interface for selecting options. Make the inline checkboxes component your own by adjusting styles, layout, and functionality to fit seamlessly with your website's design and user experience goals.

Code Explanation

Container and Inline Form Check Structure:

  • <div class="container mt-5">: This div sets up a Bootstrap container with top margin (mt-5), creating space between the content and the elements above it.
  • <div class="form-check form-check-inline">: These divs initialize Bootstrap form-check components styled to display checkboxes inline (form-check-inline).

Checkbox Inputs:

  • <input class="form-check-input" type="checkbox" value="" id="inlineCheckbox1" checked>:
    • form-check-input: Bootstrap class for styling the checkbox input within a form-check.
    • type="checkbox": Specifies that this input is a checkbox.
    • id="inlineCheckbox1": Unique identifier for the checkbox, linked to the label.
    • checked: Attribute that makes this checkbox initially checked.
  • <input class="form-check-input" type="checkbox" value="" id="inlineCheckbox2">:
    • Similar structure to the first checkbox but without the checked attribute, making it unchecked by default.
  • <input class="form-check-input" type="checkbox" value="" id="inlineCheckbox3" disabled>:
    • disabled: Attribute that disables the checkbox input, making it non-interactive.
    • This checkbox is also styled inline (form-check-inline).

Checkbox Labels:

  • <label class="form-check-label" for="inlineCheckbox1">Checked</label>:
    • form-check-label: Bootstrap class for styling the label associated with a form-check input.
    • for="inlineCheckbox1": Specifies which checkbox input (id="inlineCheckbox1") this label is associated with.
    • Text content: "Checked" is the label displayed next to the first checkbox.
  • <label class="form-check-label" for="inlineCheckbox2">Unchecked</label>:
    • Similar structure to the first label but associated with the second checkbox (id="inlineCheckbox2").
  • <label class="form-check-label" for="inlineCheckbox3">Disabled</label>:
    • Similar structure to the first label but associated with the third checkbox (id="inlineCheckbox3"), and it indicates that the checkbox is disabled.