Custom styled checkboxes with Bootstrap
Sometimes, you may want to add a little more customization to your checkboxes than available in the default bootstrap style. Here is a collection of custom checkbox styles for your bootstrap projects: See the Pen awesome-bootstrap-checkbox/demo/ by Edrees (@Edrees21) on CodePen. code by @Edrees21
How to create a dropdown with checkbox options with Bootstrap Style
Suppose you want to allow your users to select multiple options. However, you want to display the options just like a dropdown. The HTML built-in dropdown box has a multiple option; but most users are unaware of how to select multiple options from such a list. Here is a jQuery component to your rescue: Bootstrap MultiSelect. The sample code to set up a dropdown box: <select name="ingredients[]" id="ingredients" multiple="multiple"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select> $(document).
How to create checkbox in Bootstrap style ?
Here is the code to create a simple checkbox with bootstrap style: <div class="form-check"> <input class="form-check-input" type="checkbox" value="yes" id="newsletter_signup"> <label class="form-check-label" for="newsletter_signup"> Signup for newsletter </label> </div> Here is the working demo of a checkbox using Bootstrap style: See the Pen checkbox using Bootstrap by Prasanth (@prasanthmj) on CodePen. ‘Inline’ checkboxes Suppose you want multiple checkboxes in a single line. Just add form-check-inline class. Here is the sample code: <form > <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="chk_red" > <label class="form-check-label" for="chk_red">Red</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="chk_green" > <label class="form-check-label" for="chk_green">Green</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="chk_blue" > <label class="form-check-label" for="chk_blue">Blue</label> </div> </form> See the Pen Inline checkbox using bootstrap by Prasanth (@prasanthmj) on CodePen.