華宇企管

Please wait...
System Create by Mastermind Ltd.

List Group

Standard List Group

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
The current link item A second link item A disabled link item
  • An Flush item list
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

            <div class="row">
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <ul class="list-group">
                        <li class="list-group-item">An item</li>
                        <li class="list-group-item">A second item</li>
                        <li class="list-group-item">A third item</li>
                        <li class="list-group-item">A fourth item</li>
                        <li class="list-group-item disabled" aria-disabled="true">And a fifth one</li>
                    </ul>
                </div>
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <ul class="list-group">
                        <li class="list-group-item active" aria-current="true">An item</li>
                        <li class="list-group-item">A second item</li>
                        <li class="list-group-item">A third item</li>
                        <li class="list-group-item">A fourth item</li>
                        <li class="list-group-item">And a fifth one</li>
                    </ul>
                </div>
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <div class="list-group">
                        <a href="#" class="list-group-item list-group-item-action active" aria-current="true">The current link item</a>
                        <a href="#" class="list-group-item list-group-item-action">A second link item</a><button type="button" class="list-group-item list-group-item-action">A third button item</button>
                        <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
                        <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">An Flush item list</li>
                        <li class="list-group-item">A second item</li>
                        <li class="list-group-item">A third item</li>
                        <li class="list-group-item">A fourth item</li>
                        <li class="list-group-item">And a fifth one</li>
                    </ul>
                </div>
            </div>

Rich minimal list-group

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
The current link item A second link item A disabled link item 

            <div class="row">
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <ul class="list-group adminuiux-list-group">
                        <li class="list-group-item">An item</li>
                        <li class="list-group-item">A second item</li>
                        <li class="list-group-item">A third item</li>
                        <li class="list-group-item">A fourth item</li>
                        <li class="list-group-item disabled" aria-disabled="true">And a fifth one</li>
                    </ul>
                </div>
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <ul class="list-group adminuiux-list-group">
                        <li class="list-group-item active" aria-current="true">An item</li>
                        <li class="list-group-item">A second item</li>
                        <li class="list-group-item">A third item</li>
                        <li class="list-group-item">A fourth item</li>
                        <li class="list-group-item">And a fifth one</li>
                    </ul>
                </div>
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <div class="list-group adminuiux-list-group">
                        <a href="#" class="list-group-item list-group-item-action active" aria-current="true">The current link item</a>
                        <a href="#" class="list-group-item list-group-item-action">A second link item</a><button type="button" class="list-group-item list-group-item-action">A third button item</button>
                        <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
                        <a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
                    </div>
                </div>
            </div>

Numbered List Group

  1. A list item
  2. A list item
  3. A list item
  1. Subheading
    Content for list item
    14
  2. Subheading
    Content for list item
    14
  3. Subheading
    Content for list item
    14
  • A list item 14
  • A second list item 2
  • A third list item 1 

            <div class="row">
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <ol class="list-group list-group-numbered">
                        <li class="list-group-item">A list item</li>
                        <li class="list-group-item">A list item</li>
                        <li class="list-group-item">A list item</li>
                    </ol>
                </div>
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <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">Subheading</div>
                                Content for list item
                            </div>
                            <span class="badge text-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">Subheading</div>
                                Content for list item
                            </div>
                            <span class="badge text-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">Subheading</div>
                                Content for list item
                            </div>
                            <span class="badge text-bg-primary rounded-pill">14</span>
                        </li>
                    </ol>
                </div>
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <ul class="list-group">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            A list item
                            <span class="badge text-bg-primary rounded-pill">14</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            A second list item
                            <span class="badge text-bg-primary rounded-pill">2</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            A third list item
                            <span class="badge text-bg-primary rounded-pill">1</span>
                        </li>
                    </ul>
                </div>
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                </div>
            </div>

Colored List Group

A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item 

            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
                <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
            </div>

Radio and Checkbox List Group


            <div class="row">
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <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 stretched-link" for="firstCheckbox">First checkbox</label>
                        </li>
                        <li class="list-group-item">
                            <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
                            <label class="form-check-label stretched-link" for="secondCheckbox">Second checkbox</label>
                        </li>
                        <li class="list-group-item">
                            <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
                            <label class="form-check-label stretched-link" for="thirdCheckbox">Third checkbox</label>
                        </li>
                    </ul>
                </div>
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <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 stretched-link" for="firstRadio">First radio</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 stretched-link" for="secondRadio">Second radio</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 stretched-link" for="thirdRadio">Third radio</label>
                        </li>
                    </ul>
                </div>
                <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                    <ul class="list-group adminuiux-list-group">
                        <li class="list-group-item">
                            <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio2" checked>
                            <label class="form-check-label stretched-link" for="firstRadio2">First radio</label>
                        </li>
                        <li class="list-group-item">
                            <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio2">
                            <label class="form-check-label stretched-link" for="secondRadio2">Second radio</label>
                        </li>
                        <li class="list-group-item">
                            <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio2">
                            <label class="form-check-label stretched-link" for="thirdRadio2">Third radio</label>
                        </li>
                    </ul>
                </div>
            </div>
Collapse
Modal Dialog