Author: | imanfakhar |
---|---|
Views Total: | 14,080 views |
Official Page: | Go to website |
Last Update: | September 10, 2018 |
License: | MIT |
Preview:

Description:
A small CSS extension for Bootstrap 4 and 3 that makes the list group selectable with custom checkboxes and radio buttons based on Font Awesome.
How to use it:
Insert the necessary Bootstrap and Font Awesome into the file.
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="font-awesome.min.css">
Insert the stylesheet ‘bootstrap-checkbox-radio-list-group-item.min.css’ after Bootstrap.
<link rel="stylesheet" href="bootstrap-checkbox-radio-list-group-item.min.css">
Add checkboxes to the list group.
<div class="list-group checkbox-list-group"> <div class="list-group-item"> <label><input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Default</span></label></div> <div class="list-group-item list-group-item-success"><label> <input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Success</span></label></div> <div class="list-group-item list-group-item-info"><label> <input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Info</span></label></div> <div class="list-group-item list-group-item-warning"><label> <input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Warning</span></label></div> <div class="list-group-item list-group-item-danger"><label> <input type="checkbox"><span class="list-group-item-text"><i class="fa fa-fw"></i> Danger</span></label></div> </div>
Or add radio buttons to the list group.
<div class="list-group radio-list-group"> <div class="list-group-item"> <label><input type="radio" name="ra" value="1"><span class="list-group-item-text"><i class="fa fa-fw"></i> Default</span></label></div> <div class="list-group-item list-group-item-success"><label> <input type="radio" name="ra" value="2"><span class="list-group-item-text"><i class="fa fa-fw"></i> Success</span></label></div> <div class="list-group-item list-group-item-info"><label> <input type="radio" name="ra" value="3"><span class="list-group-item-text"><i class="fa fa-fw"></i> Info</span></label></div> <div class="list-group-item list-group-item-warning"><label> <input type="radio" name="ra" value="4"><span class="list-group-item-text"><i class="fa fa-fw"></i> Warning</span></label></div> <div class="list-group-item list-group-item-danger"><label> <input type="radio" name="ra" value="5"><span class="list-group-item-text"><i class="fa fa-fw"></i> Danger</span></label></div> </div>