Make Bootstrap List Group Selectable With Radio & Checkbox Inputs

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">&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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">&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<input type="radio" name="ra" value="5"><span class="list-group-item-text"><i class="fa fa-fw"></i> Danger</span></label></div>
</div>