<ul class="list-group">
  <li class="list-group-item">هدف بهبود ابزارهای کاربردی</li>
  <li class="list-group-item">شصت و سه درصد گذشته</li>
  <li class="list-group-item">شصت و سه درصد گذشته</li>
  <li class="list-group-item">شامل حروفچینی</li>
  <li class="list-group-item">شرایط فعلی تکنولوژی</li>
</ul>

<ul class="list-group">
  <li class="list-group-item">هدف بهبود ابزارهای کاربردی</li>
  <li class="list-group-item active">شصت و سه درصد گذشته</li>
  <li class="list-group-item">شصت و سه درصد گذشته</li>
  <li class="list-group-item">شامل حروفچینی</li>
  <li class="list-group-item">شرایط فعلی تکنولوژی</li>
</ul>

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">هدف بهبود ابزارهای کاربردی</li>
  <li class="list-group-item">شصت و سه درصد گذشته</li>
  <li class="list-group-item">شصت و سه درصد گذشته</li>
  <li class="list-group-item">شامل حروفچینی</li>
  <li class="list-group-item">شرایط فعلی تکنولوژی</li>
</ul>

<!-- Link -->
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">...</a>
  <a href="#" class="list-group-item list-group-item-action">...</a>
  <a href="#" class="list-group-item list-group-item-action">...</a>
  <a href="#" class="list-group-item list-group-item-action">...</a>
  <a href="#" class="list-group-item list-group-item-action">...</a>
</div>

<!-- Button -->
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action">...</button>
  <button type="button" class="list-group-item list-group-item-action">...</button>
  <button type="button" class="list-group-item list-group-item-action">...</button>
  <button type="button" class="list-group-item list-group-item-action">...</button>
  <button type="button" class="list-group-item list-group-item-action">...</button>
</div>

<ul class="list-group list-group-flush">
  <li class="list-group-item">هدف بهبود ابزارهای کاربردی</li>
  <li class="list-group-item">شصت و سه درصد گذشته</li>
  <li class="list-group-item">شصت و سه درصد گذشته</li>
  <li class="list-group-item">شامل حروفچینی</li>
  <li class="list-group-item">شرایط فعلی تکنولوژی</li>
</ul>

<ul class="list-group">
  <li class="list-group-item list-group-item-primary">...</li>
  <li class="list-group-item list-group-item-secondary">...</li>
  <li class="list-group-item list-group-item-success">...</li>
  <li class="list-group-item list-group-item-danger">...</li>
  <li class="list-group-item list-group-item-warning">...</li>
  <li class="list-group-item list-group-item-info">...</li>
  <li class="list-group-item list-group-item-light">...</li>
  <li class="list-group-item list-group-item-dark">...</li>
</ul>

<!-- Light -->
<ul class="list-group">
  <li class="list-group-item list-group-item-primary-bright">...</li>
  <li class="list-group-item list-group-item-secondary-bright">...</li>
  <li class="list-group-item list-group-item-success-bright">...</li>
  <li class="list-group-item list-group-item-danger-bright">...</li>
  <li class="list-group-item list-group-item-warning-bright">...</li>
  <li class="list-group-item list-group-item-info-bright">...</li>
  <li class="list-group-item list-group-item-dark-bright">...</li>
</ul>

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    هدف بهبود ابزارهای کاربردی
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    شصت و سه درصد گذشته
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    شصت و سه درصد گذشته
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">آیتم لیست گروه سرتیتر</h5>
      <small>3 روز قبل</small>
    </div>
    <p class="mb-1">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است،.</p>
    <small>لورم ایپسوم متن ساختگی</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">آیتم لیست گروه سرتیتر</h5>
      <small class="text-muted">3 روز قبل</small>
    </div>
    <p class="mb-1">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است،.</p>
    <small class="text-muted">لورم ایپسوم متن ساختگی</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">آیتم لیست گروه سرتیتر</h5>
      <small class="text-muted">3 روز قبل</small>
    </div>
    <p class="mb-1">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است،.</p>
    <small class="text-muted">لورم ایپسوم متن ساختگی</small>
  </a>
</div>

<div class="row">
  <div class="col-md-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab">خانه</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" >Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" >Settings</a>
    </div>
  </div>
  <div class="col-md-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>