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

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>