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

Category: CSS & CSS3 , Form , Recommended | January 7, 2023
Author:flatlogic
Views Total:115 views
Official Page:Go to website
Last Update:January 7, 2023
License:MIT

Preview:

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

Description:

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

You Might Be Interested In:


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

  1. 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
  2. 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