اضافه کردن .active به یک .list-group-item برای نشان دادن انتخاب فعال فعلی.

• لورم ایپسوم متن ساختگی
• لورم ایپسوم متن ساختگی
• لورم ایپسوم متن ساختگی
• لورم ایپسوم متن ساختگی
• لورم ایپسوم متن ساختگی

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

همه را تغییر دهید li برچسب ها به a برچسب ها را برای تبدیل آن به یک لینک

<!-- Links -->
<div class="list-group ">
    <a href="javascript:void(0);" class="list-group-item list-group-item-action">لورم ایپسوم متن ساختگی</a>
    <a href="javascript:void(0);" class="list-group-item list-group-item-action active">لورم ایپسوم متن ساختگی</a>
    <a href="javascript:void(0);" class="list-group-item list-group-item-action">لورم ایپسوم متن ساختگی</a>
    <a href="javascript:void(0);" class="list-group-item list-group-item-action">لورم ایپسوم متن ساختگی</a>
    <a href="javascript:void(0);" class="list-group-item list-group-item-action disabled">لورم ایپسوم متن ساختگی</a>
</div>

• پیام ها

  4 پیام جدید

• لوکیشن

  25 مکانهای مسافرتی جدید

• انعطاف پذیر

  سفارشی سازی انعطاف پذیری

<!-- Icons -->
<ul class="list-group list-group-icons-meta">
    <li class="list-group-item list-group-item-action">
        <div class="media">
            <div class="d-flex mr-3">
                <svg> ... </svg>
            </div>
            <div class="media-body">
                <h6 class="tx-inverse">Messages</h6>
                <p class="mg-b-0">4 New Messages</p>
            </div>
        </div>
    </li>
    <li class="list-group-item list-group-item-action active">
        <div class="media">
            <div class="d-flex mr-3">
                <svg> ... </svg>
            </div>
            <div class="media-body">
                <h6 class="tx-inverse">Locations</h6>
                <p class="mg-b-0">25 مکانهای مسافرتی جدید</p>
            </div>
        </div>
    </li>
    <li class="list-group-item list-group-item-action">
        <div class="media">
            <div class="d-flex mr-3">
                <svg> ... </svg>
            </div>
            <div class="media-body">
                <h6 class="tx-inverse">Flexible</h6>
                <p class="mg-b-0">سفارشی سازی انعطاف پذیری </p>
            </div>
        </div>
    </li>
</ul>

• 

  زینب رمانی

  رهبر پروژه

• 

  سونیا تنها

  طراح وب

• 

  حمید کولاکی

  توسعه دهنده

<!-- Images -->
<ul class="list-group list-group-media">
    <li class="list-group-item list-group-item-action">
        <div class="media">
            <div class="mr-3">
                <img alt="avatar" src="assets/img/90x90.jpg" class="img-fluid rounded-circle">
            </div>
            <div class="media-body">
                <h6 class="tx-inverse">زینب رمانی</h6>
                <p class="mg-b-0">رهبر پروژه</p>
            </div>
        </div>
    </li>
    <li class="list-group-item list-group-item-action active">
        <div class="media">
            <div class="mr-3">
                <img alt="avatar" src="assets/img/90x90.jpg" class="img-fluid rounded-circle">
            </div>
            <div class="media-body">
                <h6 class="tx-inverse">سونیا تنها</h6>
                <p class="mg-b-0">طراح وب</p>
            </div>
        </div>
    </li>
    <li class="list-group-item list-group-item-action ">
        <div class="media">
            <div class="mr-3">
                <img alt="avatar" src="assets/img/90x90.jpg" class="img-fluid rounded-circle">
            </div>
            <div class="media-body">
                <h6 class="tx-inverse">حمید کولاکی</h6>
                <p class="mg-b-0">Developer</p>
            </div>
        </div>
    </li>
</ul>

• لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ پروژه
• لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ استرس
• لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ موفقیت

<!-- Task -->
<ul class="list-group task-list-group">
    <li class="list-group-item list-group-item-action">
        <div class="n-chk">
            <label class="new-control new-checkbox checkbox-primary w-100 justify-content-between">
              <input type="checkbox" class="new-control-input">
              <span class="new-control-indicator"></span>
                <span class="ml-2">
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                </span>
                <span class="ml-3 d-block">
                    <span class="badge badge-secondary">Project</span>
                </span>
            </label>
        </div>
    </li>
    <li class="list-group-item list-group-item-action active">
        <div class="n-chk">
            <label class="new-control new-checkbox checkbox-primary w-100 justify-content-between">
              <input type="checkbox" class="new-control-input">
              <span class="new-control-indicator"></span>
                <span class="ml-2">
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                </span>
                <span class="ml-3 d-block">
                    <span class="badge badge-primary">Urgent</span>
                </span>
            </label>
        </div>
    </li>
    <li class="list-group-item list-group-item-action">
        <div class="n-chk">
            <label class="new-control new-checkbox checkbox-primary w-100 justify-content-between">
              <input type="checkbox" class="new-control-input">
              <span class="new-control-indicator"></span>
                  <span class="ml-2">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</span>
                  <span class="ml-3 d-block">
                      <span class="badge badge-success">موفقیت</span>
                  </span>
            </label>
        </div>
    </li>
</ul>