List groups

List groups are suitable to accommodate filter lists, with easily distinguishable selected items, initially developed to be used on layouts with sidebar filters.

Code output
List header
List header
HTML Markup
Copy<div class="row">
<div class="col-xs-12 col-sm-4">
  <div class="list-group">
    <h5 class="list-header">List header</h5>
    <ul class="list-filters">
      <li><a href="#">List-item 1</a></li>
      <li><a href="#" class="active">List-item 2</a></li>
      <li><a href="#">List-item 3</a></li>
      <li><a href="#">List-item 4</a></li>
      <li><a href="#">List-item 5</a></li>
    </ul>
  </div>
</div>
<div class="col-xs-12 col-sm-4">
  <div class="list-group">
    <h5 class="list-header">List header</h5>
    <ul class="list-filters">
      <li>
        <label class="custom-checkbox">
          <input type="checkbox" value="checkbox1" checked>
          <span>192.168.0.1</span>
        </label>
      </li>
      <li>
        <label class="custom-checkbox">
          <input type="checkbox" value="checkbox2" checked>
          <span>192.168.0.2</span>
        </label>
      </li>
      <li>
        <label class="custom-checkbox">
          <input type="checkbox" value="checkbox3" checked>
          <span>192.168.0.3</span>
        </label>
      </li>
      <li>
        <label class="custom-checkbox">
          <input type="checkbox" value="checkbox4">
          <span>192.168.0.4</span>
        </label>
      </li>
      <li>
        <label class="custom-checkbox">
          <input type="checkbox" value="checkbox5">
          <span>192.168.0.5</span>
        </label>
      </li>
    </ul>
  </div>
</div>
<div class="col-xs-12 col-sm-4">
  <div class="list-group">
    <h5 class="list-header">List header</h5>
    <ul class="list-filters">
      <li>
        <label class="custom-radio">
          <input type="radio" name="group1" value="option1" checked>
          <span>Option 1</span>
        </label>
      </li>
      <li>
        <label class="custom-radio">
          <input type="radio" name="group1" value="option2">
          <span>Option 2</span>
        </label>
      </li>
      <li>
        <label class="custom-radio">
          <input type="radio" name="group1" value="option3">
          <span>Option 3</span>
        </label>
      </li>
      <li>
        <label class="custom-radio">
          <input type="radio" name="group1" value="option4">
          <span>Option 4</span>
        </label>
      </li>
      <li>
        <label class="custom-radio">
          <input type="radio" name="group1" value="option5">
          <span>Option 5</span>
        </label>
      </li>
    </ul>
  </div>
</div>
</div>