مجموعات القوائم

<ul class="list-group"> <li class="list-group-item">عنصر</li> <li class="list-group-item">عنصر ثاني</li> <li class="list-group-item">عنصر ثالث</li> <li class="list-group-item">عنصر رابع</li> <li class="list-group-item">وعنصر خامس</li> </ul>

<ul class="list-group"> <li class="list-group-item active" aria-current="true">عنصر نشط</li> <li class="list-group-item">عنصر ثاني</li> <li class="list-group-item">عنصر ثالث</li> <li class="list-group-item disabled" aria-disabled="true">عنصر معطل</li> <li class="list-group-item">وعنصر خامس</li> </ul>

<!-- مع روابط --> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> عنصر الرابط الحالي </a> <a href="#" class="list-group-item list-group-item-action">عنصر رابط ثاني</a> <a href="#" class="list-group-item list-group-item-action">عنصر رابط ثالث</a> <a href="#" class="list-group-item list-group-item-action">عنصر رابط رابع</a> <a class="list-group-item list-group-item-action disabled">عنصر رابط معطل</a> </div> <!-- مع أزرار --> <div class="list-group"> <button type="button" class="list-group-item list-group-item-action active" aria-current="true"> الزر الحالي </button> <button type="button" class="list-group-item list-group-item-action">عنصر زر ثاني</button> <button type="button" class="list-group-item list-group-item-action">عنصر زر ثالث</button> <button type="button" class="list-group-item list-group-item-action" disabled>عنصر زر معطل</button> </div>

<ul class="list-group list-group-flush"> <li class="list-group-item">عنصر</li> <li class="list-group-item">عنصر ثاني</li> <li class="list-group-item">عنصر ثالث</li> <li class="list-group-item">عنصر رابع</li> <li class="list-group-item">وعنصر خامس</li> </ul>

<ol class="list-group list-group-numbered"> <li class="list-group-item">عنصر قائمة</li> <li class="list-group-item">عنصر قائمة</li> <li class="list-group-item">عنصر قائمة</li> </ol> <!-- مرقمة مع محتوى مخصص --> <ol class="list-group list-group-numbered"> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">عنوان فرعي</div> محتوى عنصر القائمة </div> <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-start"> <div class="ms-2 me-auto"> <div class="fw-bold">عنوان فرعي</div> محتوى عنصر القائمة </div> <span class="badge bg-primary rounded-pill">14</span> </li> </ol>

<ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> البريد الوارد <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> المسودات <span class="badge bg-primary rounded-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> المرسل <span class="badge bg-primary rounded-pill">99+</span> </li> </ul>

<div class="list-group"> <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">عنوان عنصر مجموعة القائمة</h5> <small>قبل 3 أيام</small> </div> <p class="mb-1">بعض المحتوى النائب في فقرة.</p> <small>وبعض الطباعة الصغيرة.</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">عنوان عنصر مجموعة القائمة</h5> <small class="text-muted">قبل 3 أيام</small> </div> <p class="mb-1">بعض المحتوى النائب في فقرة.</p> <small class="text-muted">وبعض الطباعة الصغيرة الصامتة.</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">عنوان عنصر مجموعة القائمة</h5> <small class="text-muted">قبل 3 أيام</small> </div> <p class="mb-1">بعض المحتوى النائب في فقرة.</p> <small class="text-muted">وبعض الطباعة الصغيرة الصامتة.</small> </a> </div>

<ul class="list-group"> <li class="list-group-item">عنصر مجموعة قائمة افتراضي بسيط</li> <li class="list-group-item list-group-item-primary">عنصر مجموعة قائمة أساسي بسيط</li> <li class="list-group-item list-group-item-secondary">عنصر مجموعة قائمة ثانوي بسيط</li> <li class="list-group-item list-group-item-success">عنصر مجموعة قائمة نجاح بسيط</li> <li class="list-group-item list-group-item-danger">عنصر مجموعة قائمة خطر بسيط</li> <li class="list-group-item list-group-item-warning">عنصر مجموعة قائمة تحذير بسيط</li> <li class="list-group-item list-group-item-info">عنصر مجموعة قائمة معلومات بسيط</li> <li class="list-group-item list-group-item-light">عنصر مجموعة قائمة فاتح بسيط</li> <li class="list-group-item list-group-item-dark">عنصر مجموعة قائمة داكن بسيط</li> </ul>

<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">عنصر مجموعة قائمة افتراضي بسيط</a> <a href="#" class="list-group-item list-group-item-action list-group-item-primary">عنصر مجموعة قائمة أساسي بسيط</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success">عنصر مجموعة قائمة نجاح بسيط</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">عنصر مجموعة قائمة خطر بسيط</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">عنصر مجموعة قائمة تحذير بسيط</a> </div>

<!-- أفقي دائمًا --> <ul class="list-group list-group-horizontal"> <li class="list-group-item">عنصر</li> <li class="list-group-item">عنصر ثاني</li> <li class="list-group-item">عنصر ثالث</li> </ul> <!-- أفقي عند نقطة توقف محددة --> <ul class="list-group list-group-horizontal-sm"> <li class="list-group-item">عنصر</li> <li class="list-group-item">عنصر ثاني</li> <li class="list-group-item">عنصر ثالث</li> </ul> <ul class="list-group list-group-horizontal-md"> <li class="list-group-item">عنصر</li> <li class="list-group-item">عنصر ثاني</li> <li class="list-group-item">عنصر ثالث</li> </ul>

<!-- خانات الاختيار --> <ul class="list-group"> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox"> <label class="form-check-label" for="firstCheckbox">خانة اختيار أولى</label> </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox"> <label class="form-check-label" for="secondCheckbox">خانة اختيار ثانية</label> </li> <li class="list-group-item"> <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox"> <label class="form-check-label" for="thirdCheckbox">خانة اختيار ثالثة</label> </li> </ul> <!-- أزرار الاختيار --> <ul class="list-group"> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked> <label class="form-check-label" for="firstRadio">زر اختيار أول</label> </li> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio"> <label class="form-check-label" for="secondRadio">زر اختيار ثاني</label> </li> <li class="list-group-item"> <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio"> <label class="form-check-label" for="thirdRadio">زر اختيار ثالث</label> </li> </ul>