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

• کراس جاستو
• متن نمونه 1
• متن نمونه 2
• متن نمونه 3
• متن نمونه 4

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

• کراس جاستو
• متن نمونه 1
• متن نمونه 2
• متن نمونه 3
• متن نمونه 4

برای برداشتن برخی از حاشیه‌ها و گوشه‌های گرد، .list-group-flush را اضافه کنید تا موارد فهرست را مثل کارت ها ارائه کنید.

• کراس جاستو
• متن نمونه 1
• متن نمونه 2
• متن نمونه 3
• متن نمونه 4

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

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

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

• کراس جاستو 14
• متن نمونه 1 2
• متن نمونه 2 1

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

• کراس جاستو 14
• متن نمونه 1 2
• متن نمونه 2 1

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

• کراس جاستو
• متن نمونه 1
• متن نمونه 2
• متن نمونه 3
• متن نمونه 4

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

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

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

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

• کراس جاستو
• متن نمونه 1
• متن نمونه 2

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

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