Mobile friendly fancy checkbox and radio buttons with bootstrap 3.0

Now a days, Most of the websites are mobile friendly.So that all web developers are focused on responsive web development.So today i gonna to tell how to create mobile friendly fancy check boxes and radio buttons with flat design.

For this tutorial i used bootstrap 3.0 and Jquery pluign(Jquery + iCheck) and also iCheck has separate library for Zepto js compatible.It looks Windows8 like a flat design.

bootstrap-check-box

Features of iCheck Jquery Plugin:

  • It works across different browsers (Desktop and Mobile Devices)
  • It quite compatible with touch devices like Andriod, iOS, BlackBerry, Windows Phone
  • It has separate library for Jquery and Zepto
  • Customization is very simple

How to use iCheck:

It is very simple to use. Just include this library file and css file in your HTML header.Then you must initialize that plugin for check box and radio buttons

You can able change the color scheme for the check box and radio buttons by changing of “checkboxClass” variable.

HTML code:

CSS:

Plugin url: https://github.com/fronteed/iCheck
Demo and Download

  • Garrett

    Is this IE 8+ compatible?