Pretty Checkbox & Radio Inputs with Bootstrap and awesome-bootstrap-checkbox.css

Category: CSS & CSS3 , Form , Recommended | January 7, 2023
9 Comments
Authorflatlogic
Last UpdateJanuary 7, 2023
LicenseMIT
Tags
, ,
Views325,571 views
OfficialGo to website
Live DemoDownload
Pretty Checkbox & Radio Inputs with Bootstrap and awesome-bootstrap-checkbox.css

A pure CSS solution to beautify the default checkboxes & radio buttons with Bootstrap styles.

Supports both Bootstrap 5, Bootstrap 4, and Bootstrap 3.

The Bootstrap 4 version is available here.

How to use it:

Add the required Bootstrap’s stylesheet and Font Awesome icon font in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/cdn/fontawesome.min.css" />

Add the  awesome-bootstrap-checkbox.css file in the document.

<link rel="stylesheet" href="awesome-bootstrap-checkbox.css">

Beautify the checkboxes & radio buttons with Bootstrap branding colors.

<form role="form">
  ...
  <div class="form-check abc-checkbox">
    <input class="form-check-input" id="checkbox1" type="checkbox">
    <label class="form-check-label" for="checkbox1">
      Check me out
    </label>
  </div>
  ...
</form>

Changelog:

01/07/2023

  • Update to Bootstrap 5

06/26/2019

  • Update to Bootstrap 4

07/11/2017

  • Update

See Also:

You Might Be Interested In:

9 thoughts on “Pretty Checkbox & Radio Inputs with Bootstrap and awesome-bootstrap-checkbox.css”

  2. Smaily Carrilho

    Hi, it’s not working with bootstrap 3.3.6

    The checkbox doesn’t check.

    Reply ↓
    1. gamer

      seems like you are nesting input and label..Nesting wont work..also input must be before label

      Reply ↓
      1. Nitesh

        same here, does not change the checked attribute of input checkbox

        Reply ↓
  4. Anllerys Cuevas M.

    no working, i downloaded everything font…, bootstrap… and awesome…. link everythig (in my html) and still no working.

    Reply ↓

Leave a Reply