مثال پایه

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

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

آیتم های فعال

برای نشان دادن انتخاب فعال فعلی، .activeبه a اضافه کنید..list-group-iteمیلیون

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

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

.disabledبه a اضافه کنید .list-group-iteمیلیونتا غیرفعال به نظر برسد.

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

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

از <a>s یا <button>s برای ایجاد آیتم های گروه لیست قابل اجرا با حالت شناور، غیرفعال و فعال با افزودن .list-group-item-actionاستفاده کنید.

فلاش

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

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

افقی

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

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

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

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

کلاس های متنی

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

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

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

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

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

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

با نشان ها

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

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

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

و اگر می‌خواهید <label>s را به‌عنوان .list-group-iteمیلیونمنطقه‌ای با ضربه بزرگ انتخاب کنید، می‌توانید این کار را نیز انجام دهید.

• اولین چک باکس
• چک باکس دوم
• چک باکس سوم
• چک باکس چهارم
• چک باکس پنجم

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

اعداد توسط counter-resetروی ایجاد می‌شوند <ol>، و سپس استایل داده می‌شوند و با یک ::beforeعنصر شبه روی <li>با counter-incrementو contentقرار می‌گیرند.

1. عنوان فرعی

   لورم ایپسوم متن ساختگی
   14
2. عنوان فرعی

   لورم ایپسوم متن ساختگی
   14
3. عنوان فرعی

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