Bootstrap 4 Custom Checkboxes

Elevate user interaction on your website by incorporating custom checkboxes using Bootstrap 4.

Introducing our Bootstrap 4 Custom Checkboxes component, designed to elevate the visual appeal and functionality of checkbox selections on your website. Checkboxes are essential for allowing users to select multiple options from a list, and our custom styling options ensure they seamlessly integrate with your site's design aesthetic.

Built on Bootstrap's flexible framework, our Custom Checkboxes offer extensive customization options. You can personalize the appearance with custom styles, including colors, sizes, icons, animations, and label positioning, ensuring they align perfectly with your website's branding and visual identity.

Key Features:

  • Customizable Styles: Personalize the appearance of checkboxes using Bootstrap's utility classes and custom CSS, allowing for unique designs that match your website's theme.
  • Visually Appealing: Enhance user interaction with checkboxes that are visually appealing and easy to distinguish, improving usability and user experience.
  • Responsive Design: Ensure seamless functionality across desktops, tablets, and mobile devices with checkboxes that adapt responsively to different screen sizes.
  • Easy Integration: Integrate the Bootstrap 4 Custom Checkboxes component effortlessly into your website's HTML and CSS, leveraging Bootstrap's components for streamlined deployment and maintenance.

Enhance user interaction and form usability on your website with our Bootstrap 4 Custom Checkboxes. Whether you're building registration forms, preference settings, or survey tools, these customizable checkboxes provide a polished and user-friendly solution for selecting options and improving overall website aesthetics.

Steps to Copy the Code

Step 1: Copy the Code Snippet

  • Begin by copying the HTML and CSS code snippet provided above. This snippet includes the necessary structure and styles to create custom checkboxes using Bootstrap 4. Select the code, click the copy button, and paste it into your HTML file where you want the custom 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 custom checkboxes inherit Bootstrap's styling.

Step 3: Customize and Make it Yours

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

Code Explanation

HTML Code

Container and Custom Control 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="custom-control custom-checkbox">: These divs initialize Bootstrap custom checkboxes (custom-control custom-checkbox).
Checkbox Inputs:
  • <input type="checkbox" class="custom-control-input" id="customCheck1" checked>:
    • custom-control-input: Bootstrap class for styling the checkbox input within a custom control.
    • type="checkbox": Specifies that this input is a checkbox.
    • id="customCheck1": Unique identifier for the checkbox, linked to the label.
    • checked: Attribute that makes this checkbox initially checked.
  • <input type="checkbox" class="custom-control-input" id="customCheck2">:
    • Similar structure to the first checkbox but without the checked attribute, making it unchecked by default.
  • <input type="checkbox" class="custom-control-input" id="customCheck3" disabled>:
    • disabled: Attribute that disables the checkbox input, making it non-interactive.
    • This checkbox is also styled as a custom control.
Checkbox Labels:
  • <label class="custom-control-label" for="customCheck1">Checked</label>:
    • custom-control-label: Bootstrap class for styling the label associated with a custom control.
    • for="customCheck1": Specifies which checkbox input (id="customCheck1") this label is associated with.
    • Text content: "Checked" is the label displayed next to the first checkbox.
  • <label class="custom-control-label" for="customCheck2">Unchecked</label>:
    • Similar structure to the first label but associated with the second checkbox (id="customCheck2").
  • <label class="custom-control-label" for="customCheck3">Disabled</label>:
    • Similar structure to the first label but associated with the third checkbox (id="customCheck3"), indicating that the checkbox is disabled.

CSS Code

Styling the Checkbox Icon (::before pseudo-element):
  • .custom-checkbox .custom-control-label::before: Targets the pseudo-element ::before of the label (custom-control-label) inside elements with the class custom-checkbox.
  • border: 1px solid #007bff;: Sets a solid border with a color (#007bff), which is a shade of blue, for the checkbox icon.
Styling Checked State:
  • .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before: Targets the ::before pseudo-element of the label (custom-control-label) that immediately follows a checked (checked) input (custom-control-input) within the custom-checkbox context.
  • background-color: #007bff;: Changes the background color of the checkbox icon to #007bff when the checkbox is checked.
  • border-color: #007bff;: Sets the border color to #007bff when the checkbox is checked, maintaining consistency with the background color.
Styling Focus State:
  • .custom-checkbox .custom-control-input:focus ~ .custom-control-label::before: Targets the ::before pseudo-element of the label (custom-control-label) that immediately follows a focused (focus) input (custom-control-input) within the custom-checkbox context.
  • box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);: Applies a box shadow to the checkbox icon when it is focused. The shadow (rgba(0, 123, 255, 0.25)) is a semi-transparent blue shade (rgba(0, 123, 255)) with a blur effect (0.2rem).