<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 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>

          

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">آیتم شماره یک</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 disabled" tabindex="-1" aria-disabled="true">آیتم شماره پنج</a>
</div>

          

<ul class="list-group">
  <li class="list-group-item">آیتم شماره یک</li>
  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

          

<ul class="list-group">
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-01.jpg" alt="User Image">
      </div>
      <div class="media-body">
        <span class="title">ستاره‌ها چشمک می‌زنند</span>
        <p>شیرینی افراطی، رفتار دشوار او. در مورد واگذاری به عنوان صاحبخانه وحشتناک است. ماه‌هاست که از انجام کارها می‌ترسم.
          at.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-02.jpg" alt="User Image">
      </div>
      <div class="media-body">
        <span class="title">این عروسک ژاپنی است.</span>
        <p>ماریان یا شوهرانتان اگر قوی‌تر باشید. به عنوان میدلتون‌ها به ندرت در نظر گرفته می‌شود. ارتقاء کاملاً مطابق میل شما بود.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-03.jpg" alt="User Image">
      </div>
      <div class="media-body">
        <span class="title">تیکت پشتیبانی</span>
        <p>آپارتمان‌های عالی ناخوشایند و نه تقلیل‌یافته، بی‌احتیاطیِ مواجهه با چیزهای جدید. آنها را از هم جدا کنید و فقط به پشت بام ببرید.

موسیقی

بگو درها را برایش بگذار.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-04.jpg" alt="User Image">
      </div>
      <div class="media-body">
        <span class="title">سفارش جدید</span>
        <p>Farther related bed and passage comfort civilly. Dashwoods see frankness objection abilities the. As hastened
          oh
          produced prospect formerly up am.</p>
      </div>
    </div>
  </li>
</ul>

          

<ul class="list-group">
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper bg-primary">
        <i class="mdi mdi-star-outline"></i>
      </div>
      <div class="media-body">
        <span class="title">ستاره‌ها چشمک می‌زنند</span>
        <p>شیرینی افراطی، رفتار دشوار او. در مورد واگذاری به عنوان صاحبخانه وحشتناک است. ماه‌هاست که از انجام کارها می‌ترسم.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper bg-success">
        <i class="mdi mdi-pencil"></i>
      </div>
      <div class="media-body">
        <span class="title">این عروسک ژاپنی است.</span>
        <p>ماریان یا شوهرانتان اگر قوی‌تر باشید. به عنوان میدلتون‌ها به ندرت در نظر گرفته می‌شود. ارتقاء کاملاً مطابق میل شما بود.
        </p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper bg-danger">
        <i class="mdi mdi-square-edit-outline"></i>
      </div>
      <div class="media-body">
        <span class="title">تیکت پشتیبانی</span>
        <p>آپارتمان‌های عالی ناخوشایند و نه تقلیل‌یافته، بی‌احتیاطیِ مواجهه با چیزهای جدید. آنها را از هم جدا کنید و فقط به پشت بام ببرید.
موسیقی
بگو درها را برایش بگذار.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper bg-info">
        <i class="mdi mdi-diamond-outline"></i>
      </div>
      <div class="media-body">
        <span class="title">سفارش جدید</span>
        <p>راحتی بیشتر در تختخواب و راهرو به طور مودبانه. دش‌وودها صراحت، اعتراض و توانایی‌ها را می‌بینند. همانطور که عجله شد
اوه
چشم‌اندازی که قبلاً ایجاد شده بود، صبح زود بیدار شد.</p>
      </div>
    </div>
  </li>
</ul>

          

<ul class="list-group">
  <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>
  <li class="list-group-item">آیتم شماره پنج</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>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    آیتم شماره چهار
    <span class="badge badge-primary badge-pill">10</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    آیتم شماره پنج
    <span class="badge badge-primary badge-pill">3</span>
  </li>
</ul>

          

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">آیتم شماره یک</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" disabled>آیتم شماره پنج</button>
</div>

          

<ul class="list-group">
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-01.jpg" alt="User Image">
      </div>
      <div class="custom-control custom-checkbox align-self-center">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1"></label>
      </div>
      <div class="media-body">
        <span class="title">ستاره‌ها چشمک می‌زنند</span>
        <p>شیرینی افراطی، رفتار دشوار او. در مورد واگذاری به عنوان صاحبخانه وحشتناک است. ماه‌هاست که از انجام کارها می‌ترسم.
          at.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-02.jpg" alt="User Image">
      </div>
      <div class="custom-control custom-checkbox align-self-center">
        <input type="checkbox" class="custom-control-input" id="customCheck2">
        <label class="custom-control-label" for="customCheck2"></label>
      </div>
      <div class="media-body">
        <span class="title">این عروسک ژاپنی است.</span>
        <p>ماریان یا شوهرانتان اگر قوی‌تر باشید. به عنوان میدلتون‌ها به ندرت در نظر گرفته می‌شود. ارتقاء کاملاً مطابق میل شما بود.</p>
      </div>
      
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-03.jpg" alt="User Image">
      </div>
      <div class="custom-control custom-checkbox align-self-center">
        <input type="checkbox" class="custom-control-input" id="customCheck3">
        <label class="custom-control-label" for="customCheck3"></label>
      </div>
      <div class="media-body">
        <span class="title">تیکت پشتیبانی</span>
        <p>آپارتمان‌های عالی ناخوشایند و نه تقلیل‌یافته، بی‌احتیاطیِ مواجهه با چیزهای جدید. آنها را از هم جدا کنید و فقط به پشت بام ببرید.

موسیقی

بگو درها را برایش بگذار.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item list-group-item-action">
    <div class="media media-sm mb-0">
      <div class="media-sm-wrapper">
        <img src="images/user/user-sm-04.jpg" alt="User Image">
      </div>
      <div class="custom-control custom-checkbox align-self-center">
        <input type="checkbox" class="custom-control-input" id="customCheck4">
        <label class="custom-control-label" for="customCheck4"></label>
      </div>
      <div class="media-body">
        <span class="title">سفارش جدید</span>
        <p>راحتی بیشتر در تختخواب و راهرو به طور مودبانه. دش‌وودها صراحت، اعتراض و توانایی‌ها را می‌بینند. همانطور که عجله شد
اوه
چشم‌اندازی که قبلاً ایجاد شده بود، صبح زود بیدار شد.</p>
      </div>
    </div>
  </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 text-white">عنوان آیتم لیست</h5>
      <small>3 روز قبل</small>
    </div>
    <p class="mb-1 text-white">آپارتمان‌های عالی ناخوشایند و نه تقلیل‌یافته، بی‌احتیاطیِ مواجهه با چیزهای جدید. آنها را از هم جدا کنید و فقط به پشت بام ببرید. موسیقی بگو درها را برایش بگذار.</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>