اساسی ترین گروه لیست یک لیست مرتب نشده با موارد لیست و کلاس های مناسب است. با گزینه های بعدی یا با CSS خود در صورت نیاز بر روی آن بسازید.

• فقط از فردا متنفرم
• پروتئین ها و چربی ها در
• حالم از خنده بهم میخوره
• دروازه و تعقیب خواهد شد و
• دهلیزی در اروس

فزودن .disabled به .list-group-item برای ساختن آن به نظر می رسد معلول توجه داشته باشید که برخی از عناصر با .disabled همچنین به جاوا اسکریپت سفارشی برای غیرفعال کردن کامل رویدادهای کلیک آنها (به عنوان مثال، پیوندها) نیاز دارد..

• فقط از فردا متنفرم
• پروتئین ها و چربی ها در
• حالم از خنده بهم میخوره
• دروازه و تعقیب خواهد شد و
• دهلیزی در اروس

فزودن .list-group-flush برای حذف برخی از حاشیه‌ها و گوشه‌های گرد برای ارائه فهرست موارد گروهی لبه به لبه در ظرف اصلی (مانند کارت‌ها).

• فقط از فردا متنفرم
• پروتئین ها و چربی ها در
• حالم از خنده بهم میخوره
• دروازه و تعقیب خواهد شد و
• دهلیزی در اروس

استفاده کنید کلاس های متنی برای استایل دادن به موارد فهرست با پس‌زمینه و رنگ.

• پروتئین ها و چربی ها در
• یک آیتم ساده در لیست اولیه
• یک ساده ثانویه لیست گروه آیتم
• یک ساده موفقیت لیست گروه آیتم
• یک ساده خطرناک لیست گروه آیتم
• یک ساده هشدار لیست گروه آیتم
• یک ساده اطلاعات لیست گروه آیتم
• یک ساده روشن لیست گروه آیتم
• یک ساده تیره لیست گروه آیتم

نشان های فزودن به آیتم لیست کروه برای نمایش تعداد خوانده نشده، فعالیت و موارد دیگر با کمک برخی خدمات رفاهی.

• فقط از فردا متنفرم 14
• پروتئین ها و چربی ها در 2
• حالم از خنده بهم میخوره 1

نشان های فزودن به آیتم لیست کروه برای نمایش تعداد خوانده نشده، فعالیت و موارد دیگر با کمک برخی خدمات رفاهی.

• فقط از فردا متنفرم 14
• پروتئین ها و چربی ها در 2
• حالم از خنده بهم میخوره 1

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

• فقط از فردا متنفرم
• پروتئین ها و چربی ها در
• حالم از خنده بهم میخوره
• دروازه و تعقیب خواهد شد و
• دهلیزی در اروس

استفاده کنید <a>s or <button>دکمه ها برای ساخت قابل اجرا لیست گروه موارد با حالت شناور، غیرفعال و فعال با اضافه کردن .list-group-item-action. ما این شبه کلاس ها را برای اطمینان از هم جدا می کنیم لیست گروهs ساخته شده از عناصر غیر تعاملی (ماننئ <li>ها یا <div> ها) هزینه کلیک یا ضربه زدن را ارائه نکنید.

حتما از استاندارد استفاده نکنید .btn کلاس های اینجا.

فزودن .list-group-horizontal برای تغییر طرح بندی آیتم های گروه لیست از عمودی به افقی در تمام نقاط. از طرف دیگر، یک نوع پاسخگو را انتخاب کنید .list-group-horizontal-{sm|md|lg|xl} برای ایجاد یک گروه لیست افقی که از نقطه شکست شروع می شود min-width. در حال حاضر گروه های لیست افقی را نمی توان با گروه های لیست تراز ترکیب کرد.

پروتیپ: آیا می خواهید در حالت افقی با لیست موارد گروه مطابقت داشته باشید؟ اضافه کردن .flex-fill به هر آیتم گروه لیست.

• فقط از فردا متنفرم
• پروتئین ها و چربی ها در
• حالم از خنده بهم میخوره

استفاده کنید کلاس های متنی برای استایل دادن به موارد فهرست با پس‌زمینه و رنگ.

محتوتقریبا هر HTML در داخل ، حتی برای گروه های لیست مرتبط مانند زیر ، با کمک flexbox خدمات رفاهی.