How to Style Bootstrap Custom Checkbox

A popular CSS framework Bootstrap allows developers to easily and quickly create mobile-ready and responsive web applications. It has hundreds of CSS pre-designed classes. All you need to do is to add the required class to the particular element. However, to specify custom styles to elements, CSS can be used.

This write-up will cover:

• What is the HTML “<input type= “checkbox”>” Element?
• How to Style Bootstrap Custom Checkbox?

What is the HTML “<input type= “checkbox”>” Element?

In HTML, the “<input>” element with the type “checkbox” creates a checkbox on the web page. Moreover, checkboxes allow checking more than one checkbox at a time.

Example

Before moving toward the main subject of this post, let’s see what the default checkbox looks like. To do so, add the “<label>” element with the caption and specify the “<input>” element with the type “checkbox” and the attribute “checked”. The “checked” attribute with the value “checked” is utilized to check the box by default:

Output

How to Style Bootstrap Custom Checkbox?

To make the custom checkbox, try out the steps mentioned below:

Step 1: Create an HTML File

First, create an HTML file by following the following instructions:

• Add a “<div>” element with the “p-4” and “container-fluid” classes.
• Then, specify the heading using the “<h3>” element.
• Add three “<label>” elements and assign them the class “custom-check”.
• Inside the “<label>” elements, add the “<input>” element with the “type” attribute value “checkbox”. Only the first input must be associated with the “checked” attribute.
• Lastly, mention the “<span>” element for the check mark.

HTML

The below steps must be implemented within the CSS section.

Step 2: Hide the Default Checkbox

As we need to create a custom checkbox, it is required to hide it. To do so, access the “custom-check” class and apply the styles on the “<input>” elements:

Here:

• “position” with the “absolute” value sets the element’s position relative to its parent element.
• “opacity” with the value “0” hides the “<input>” elements.

Step 3: Style the “custom-check” Class

The explanation of the above-mentioned properties is discussed below:

• “font-size” property sets the element’s font size.
• “position” with the “relative” value adjusts the element’s position corresponding to its current position.
• “display” with the “block” value gives the full width to the label.
• “padding-left” adds some space at the left of the element’s content.
• “cursor” sets the mouse pointer’s style.
• “margin-bottom” adds space at the element’s bottom.

Step 4: Create a Custom Checkbox

To make the custom checkbox, add the following CSS properties:

Here:

• “height” and “width” properties set the element’s size.
• “top” and “left” with “0” values specify no space at the top and left of the element.
• “background-color” determines the element’s background color.
• “border-radius” rounds the element’s corners.

It can be observed that the custom checkboxes have been created successfully:

Step 5: Style the Checkbox When Checked

The below CSS properties are implemented on the checkbox when it’s checked:

So far, the checkboxes are styled as shown in the below GIF:

Now, let’s create the check mark in the below sections.

Step 6: Create the Check Mark

To hide the checkmark when it’s unchecked, implement the properties mentioned below:

The “.checkmark:after” is mentioned to access the class “checkmark” and “:after” is a pseudo-class, utilized to implement styles after the content:

• “content” specifies the inserted content.
• “display” with the value “none” hides the checkmark.

Step 7: Show the Checkmark When Checked

When the user checks the checkbox, it must display the checkmark. To do so, the checkmark is applied with the CSS “display” property with the value “block”:

Step 8: Style the Checkmark

Here are the CSS properties to create the tick mark:

According to the given code:

• “left” and “top” specify the space at the left and top sides of the tick mark.
• “width” and “height” adjust the tick mark’s area.
• “border” property creates the tick mark.
• “border-width” property specifies the top, right, bottom, and left borders. Here only the right and bottom properties are specified.
• “transform” property with the value “rotate(45deg)” rotates the tick mark at 45 degrees.

Output

That was all about how to style a custom checkbox using Bootstrap.

Conclusion

To style the Bootstrap custom checkbox, first, create an HTML page. Add the “<label>” and “<input>” with the type “checkbox” elements. Then, several CSS properties are used to style them. More specifically, to make the tick mark, the CSS “border” and “border-width” properties are utilized. This post has explained how to style a custom checkbox in Bootstrap.