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?

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.


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:

<label>Default style of checkbox
 <input type= "checkbox" checked= "checked">


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.


<div class="p-4 container-fluid">
 <h3>Select the menu</h3></br><br>
 <label class="custom-check">Pizza
 <input type="checkbox" checked="checked">
 <span class="checkmark"></span>
 <label class="custom-check">Burger
 <input type="checkbox">
 <span class="checkmark"></span>
 <label class="custom-check">French Fries
 <input type="checkbox">
 <span class="checkmark"></span>

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:

.custom-check input {
 position: absolute;
 opacity: 0;


  • 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

.custom-check {
 font-size: 22px;
 position: relative;
 display: block;
 padding-left: 35px;
 cursor: pointer;
 margin-bottom: 12px;

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:

.checkmark {
 position: absolute;
 height: 27px;
 width: 27px;
 top: 0;
 left: 0;
 background-color: rgb(233, 233, 233);
 border-radius: 10px;


  • 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:

.custom-check input:checked~.checkmark {
 background-color: #6202cf;
 border-radius: 5px;

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:

.checkmark:after {
 content: "";
 display: none;
 position: absolute;

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”:

.custom-check input:checked~.checkmark:after {
 display: block;

Step 8: Style the Checkmark

Here are the CSS properties to create the tick mark:

.custom-check .checkmark:after {
 left: 8px;
 top: 5px;
 width: 9px;
 height: 14px;
 border: solid white;
 border-width: 0 3px 3px 0;
 transform: rotate(45deg);

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.


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


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.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.