Stay Updated

Subscribe to Bootsnipp newsletter. (only important updates will be sent, your email is never shared or sold to anyone else)

Featured Templates

Recent Comments

This worked easily and looks great on all browsers I've tried. Thank you for making this so simple!
Animated radios & checkboxes (noJS)

Before saying anything, thanks for this cool bootstrap snippet. Really appreciated.For anyone who wanted this checklist behave like radio list,above all code define two variables var selItem, selChk; for eg.And use below code inside widget click event //Getting clicked list and check object var temp = $widget; var tempChk = $checkbox; if (selItem === undefined || selChk === undefined) //First time usage goes here { selItem = temp; selChk = tempChk; $checkbox.prop('checked', !$checkbox.is(':checked')); updateDisplay(); } else { //First removing element that is checked $widget = selItem; $checkbox = selChk; $checkbox.prop('checked', !$checkbox.is(':checked')); updateDisplay(); //Updating global variables selItem = temp; selChk = tempChk; //Checking the element that user clicked $widget = temp; $checkbox = tempChk; $checkbox.prop('checked', !$checkbox.is(':checked')); updateDisplay(); }Plus, in widget click event, there is a updateDisplay function but also same function used in checkbox change event which is triggered inside widget click event. That makes updatedisplay function to execute twice. Above example for radio list like behave changes this execution so that updateDisplay function only hits one time.
Checked List Group

if i'd want to select checkbox only when i click on checkbox itself without click on the label?
Animated radios & checkboxes (noJS)

Hi. I needed that to. I found out that this do the trick:<% If yourboolianvariable = true Then %> <script type='text/javascript'> window.onload = function(){ document.getElementById("yourcheckboxid").checked = true; } </script><% End If %>
Material Design Switch

Very handy--much cleaner and simpler than a lot of implementations out there.One question: Do you have recommendations on how to read/set the state of the switch using javascript?
Material Design Switch

Modify: $checkbox = $('<input type="checkbox" name="'+$widget.text()+'" class="hidden" />'),
Checked List Group

How to get the list of unchecked items?
Checked List Group