Bootstrap 4 Custom Radio Buttons

Elevate your website's design with custom radio buttons using Bootstrap 4. Learn how to enhance user experience and visual appeal by customizing radio button styles to match your site's aesthetic.

Introducing our Bootstrap 4 Custom Radio Buttons, designed to elevate the visual appeal and functionality of radio button selections on your website. Radio buttons are essential for allowing users to select a single option from a set, and our custom styling options ensure they seamlessly integrate with your site's design aesthetic.

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

Key Features:

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

Enhance user interaction and form usability with our Bootstrap 4 Custom Radio Buttons. Whether you're building surveys, quizzes, or complex forms, these customizable radio buttons 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-styled radio buttons using Bootstrap 4. Select the code, click the copy button, and paste it into your HTML file where you want the radio buttons to appear.

Step 2: Link Bootstrap CSS

  • Ensure that Bootstrap's CSS is correctly linked 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 radio buttons inherit Bootstrap's styling.

Step 3: Customize and Make it Yours

  • Personalize the custom radio buttons to align with your website's design and functionality requirements. Modify the appearance of the radio buttons, such as colors, sizes, and custom styles, by adjusting Bootstrap's CSS classes or adding custom CSS. Customize the functionality of the radio buttons, such as grouping options or integrating with backend scripts to process input, to enhance user experience.

Code Explanation

HTML Code

Container and Header
<div class="container">
  <h2>Custom Radio Buttons:</h2>
  • <div class="container">: This creates a container that centers and adds appropriate padding to the enclosed content, using Bootstrap’s container class.
  • <h2>Custom Radio Buttons:</h2>: This is a header element that displays the title "Custom Radio Buttons:".
First Custom Radio Button (Checked)
<div class="custom-control custom-radio">
    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked>
    <label class="custom-control-label" for="customRadio1">Checked</label>
  </div>
  • <div class="custom-control custom-radio">: This creates a div with the class custom-control and custom-radio, which are Bootstrap classes used to style custom radio buttons.
  • <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked>: This creates a radio button input element with the following attributes:
    • id="customRadio1": Assigns a unique identifier to this radio button.
    • name="customRadio": Groups this radio button with others that share the same name, allowing only one to be selected at a time.
    • class="custom-control-input": Applies Bootstrap styling to the radio button.
    • checked: Sets this radio button as the default selected option when the page loads.
  • <label class="custom-control-label" for="customRadio1">Checked</label>: This creates a label for the radio button with the class custom-control-label, applying Bootstrap styling. The for attribute links the label to the radio button with the corresponding id attribute (customRadio1). The text "Checked" is displayed as the label.
Second Custom Radio Button (Unchecked)
<div class="custom-control custom-radio">
    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio2">Unchecked</label>
  </div>
  • Similar to the first option, but without the checked attribute. This radio button is initially unchecked.
Third Custom Radio Button (Disabled)
<div class="custom-control custom-radio">
    <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" disabled>
    <label class="custom-control-label" for="customRadio3">Disabled</label>
  </div>
  • Similar to the first and second options, but with the disabled attribute added to the radio button input element. This disables the radio button, making it unselectable.

CSS Code

Styling the Pseudo-element Before the Label
.custom-control-label::before {
  border: 1px solid #007bff;
  border-radius: 50%;
}
  • .custom-control-label::before: This targets the pseudo-element ::before of elements with the class custom-control-label. Pseudo-elements allow you to style certain parts of an element that are not explicitly in the HTML but are generated by CSS.
  • border: 1px solid #007bff;: This sets a solid border around the pseudo-element with a color of #007bff (a shade of blue), creating a circular shape.
  • border-radius: 50%;: This sets the border radius to 50%, making the pseudo-element circular.
Styling the Checked State of the Input
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #007bff;
  border-color: #007bff;
}
  • .custom-control-input:checked ~ .custom-control-label::before: This targets the pseudo-element ::before of elements with the class custom-control-label that immediately follow a checked input with the class custom-control-input.
  • background-color: #007bff;: This sets the background color of the pseudo-element to #007bff when the associated input is checked, providing a visual indicator (in this case, a filled circle).
  • border-color: #007bff;: This changes the border color to #007bff when the input is checked, matching the background color for a consistent appearance.
Styling the Disabled State of the Input
.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #e9ecef;
  border-color: #adb5bd;
}
  • .custom-control-input:disabled ~ .custom-control-label::before: This targets the pseudo-element ::before of elements with the class custom-control-label that immediately follow a disabled input with the class custom-control-input.
  • background-color: #e9ecef;: This sets the background color of the pseudo-element to #e9ecef when the associated input is disabled, indicating a deactivated state.
  • border-color: #adb5bd;: This sets the border color to #adb5bd when the input is disabled, providing a muted appearance for the circular shape.