bootstrap nav-pills

by AlexJsh02

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-xm-6 col-sm-6 col-md-6">
  <section class="section">
    <ul class="nav nav-pills nav-stacked">
      <li class="active"><a href="#">Users<span class="badge pull-right">34</span></a>
        <div class="panel panel-footer">
          <h8 class="">Inactive&nbsp;&#8212;&nbsp;<span class="badge badge-danger">34</span>
          </h8>
        </div>
      </li>
      <li class="active"><a href="#">Roles<span class="badge pull-right">34</span></a>
        <div class="panel panel-footer">
          <div class="list-group">
            <p>Reveiwer&nbsp;&#8212;&nbsp;<span class="badge badge-danger">34</span>
            </p>
            <p>
              <label class="list-group-item-text">Admin&nbsp;&#8212;&nbsp;<span class="badge badge-danger">34</span>
              </label>
            </p>
          </div>
        </div>
      </li>
    </ul>
  </section>
</div>

CSS

.badge-danger {
  background-color: #d43f3a;
}

.badge-warning {
  background-color: #d58512;
}

.badge-success {
  background-color: #398439;
}

.badge-info {
  background-color: #269abc;
}

.badge-inverse {
  background-color: #333333;
}