مثال پایه

ابتدایی ترین گروه لیست یک لیست نامرتب با آیتم های لیست و کلاس های مناسب است.\n

• درایو گوگل
• فیس بوک مسنجر
• شرکت فناوری اپل
• سیستم پشتیبانی اینترکام
• درگاه پرداخت پی پال

آیتم های فعال

اضافه کردن.active to a .list-group-item to indicate the current active selection.

• درایو گوگل
• فیس بوک مسنجر
• شرکت فناوری اپل
• سیستم پشتیبانی اینترکام
• درگاه پرداخت پی پال

موارد غیر فعال

اضافه کردن.disabled to a .list-group-item to make it appear disabled.

• درایو گوگل
• فیس بوک مسنجر
• شرکت فناوری اپل
• سیستم پشتیبانی اینترکام
• درگاه پرداخت پی پال

لینک ها و دکمه ها

استفاده کنید<a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action.

فلاش

اضافه کردن.list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

• درایو گوگل
• فیس بوک مسنجر
• شرکت فناوری اپل
• سیستم پشتیبانی اینترکام
• درگاه پرداخت پی پال

افقی

اضافه کردن.list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl} to make a list group horizontal starting at that breakpoint’s min-width.

• گوگل
• واتساپ
• فیس بوک

• سیب
• پی پال
• اینترکام

• گوگل
• واتساپ
• فیس بوک

کلاس های متنی

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

• Dapibus ac facilisis in
• یک آیتم ساده در لیست اولیه
• یک آیتم گروهی ساده ثانویه
• یک آیتم ساده لیست موفقیت در گروه
• یک آیتم گروهی لیست خطر ساده
• یک آیتم گروهی لیست هشدار ساده
• یک آیتم گروهی لیست اطلاعات ساده
• یک آیتم گروهی لیست نور ساده
• یک آیتم ساده گروه لیست تاریک

کلاس های متنی با لینک

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

محتوای دلخواه

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

با نشان ها

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

• ایمیل های جیمیل14
• پرداخت های معلق2
• اقدام مورد نیاز99+
• پرداخت ها انجام شد20
• پیام ها16+

چک باکس ها و رادیوها

و اگر بخواهید<label>s as the .list-group-item for large hit areas, you can do that, too.

• First checkbox
• Second checkbox
• Third checkbox
• Fourth checkbox
• Fifth checkbox

لیست شماره گذاری شده

اعداد توسطcounter-reset on the <ol>, and then styled and placed with a ::before psuedo-element on the <li> with counter-increment and content.

1. عنوان فرعی

   Cras justo odio
   14
2. عنوان فرعی

   Cras justo odio
   14
3. عنوان فرعی

   Cras justo odio
   14