List group

Twitter bootstrap Documentation

Basic example

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->listGroup([
    'An item',
    'A second item',
    'A third item',
    'A fourth item',
    'And a fifth one',
]);

Active items

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->listGroup([
    'An active item' => ['active' => true],
    'A second item',
    'A third item',
    'A fourth item',
    'And a fifth one',
]);

Disabled items

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->listGroup([
    'A disabled item' => ['disabled' => true],
    'A second item',
    'A third item',
    'A fourth item',
    'And a fifth one',
]);

Links and buttons

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->listGroup([
    'The current link item' => [
        'active' => true,
        'attributes' => ['href' => '#'],
    ],
    'A second item' => ['attributes' => ['href' => '#']],
    'A third item' => ['attributes' => ['href' => '#']],
    'A fourth item' => ['attributes' => ['href' => '#']],
    'A disabled link item' => [
        'disabled' => true,
        'attributes' => ['href' => '#'],
    ],
], ['type' => 'action']);

echo PHP_EOL . '<br/>';

echo $this->listGroup([
    'The current button' => ['active' => true],
    'A second item',
    'A third button item',
    'A fourth button item',
    'A disabled button item' => ['disabled' => true],
], ['type' => 'button']);

Flush

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->listGroup(
    [
        'An item',
        'A second item',
        'A third item',
        'A fourth item',
        'And a fifth one',
    ],
    ['flush' => true]
);

Numbered

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->listGroup(
    [
        'A list item',
        'A list item',
        'A list item',
    ],
    ['numbered' => true]
);

echo PHP_EOL . '<br/>';

echo $this->listGroup(
    [
        [
            'content' => '<div class="ms-2 me-auto">' .
            '<div class="fw-bold">Subheading</div>' .
            'Content for list item' .
            '</div>',
            'badge' => [
                14,
                ['type' => 'pill', 'variant' => 'primary'],
            ],
        ],
        [
            'content' => '<div class="ms-2 me-auto">' .
            '<div class="fw-bold">Subheading</div>' .
            'Content for list item' .
            '</div>',
            'badge' => [
                14,
                ['type' => 'pill', 'variant' => 'primary'],
            ],
        ],
        [
            'content' => '<div class="ms-2 me-auto">' .
            '<div class="fw-bold">Subheading</div>' .
            'Content for list item' .
            '</div>',
            'badge' => [
                14,
                ['type' => 'pill', 'variant' => 'primary'],
            ],
        ],
    ],
    ['numbered' => true]
);

Horizontal

Twitter bootstrap Documentation

Result

Source

<?php

// Add option 'horizontal' to change the layout of list group items from vertical to horizontal
echo $this->listGroup(
    [
        'An item',
        'A second item',
        'A third item',
    ],
    ['horizontal' => true]
);

// Alternatively, choose a responsive variant `sm|md|lg|xl|xxl`
// to make a list group horizontal starting at that breakpoint’s
foreach (['sm', 'md', 'lg', 'xl', 'xxl'] as $breakpoint) {
    echo PHP_EOL . '<br/>';

    echo $this->listGroup(
        [
            'An item',
            'A second item',
            'A third item',
        ],
        ['horizontal' => $breakpoint]
    );
}

Contextual classes

Twitter bootstrap Documentation

Result

Source

<?php

// Use option 'variant' to style list items with a stateful background and color
echo $this->listGroup([
    'A simple default list group item',
    'A simple primary list group item' => ['variant' => 'primary'],
    'A simple secondary list group item' => ['variant' => 'secondary'],
    'A simple success list group item' => ['variant' => 'success'],
    'A simple danger list group item' => ['variant' => 'danger'],
    'A simple warning list group item' => ['variant' => 'warning'],
    'A simple info list group item' => ['variant' => 'info'],
    'A simple light list group item' => ['variant' => 'light'],
    'A simple dark list group item' => ['variant' => 'dark'],
]);

echo PHP_EOL . '<br/>';

// Contextual classes also work with .list-group-item-action
echo $this->listGroup(
    [
        'A simple default list group item' => ['attributes' => ['href' => '#']],
        'A simple primary list group item' => [
            'variant' => 'primary',
            'attributes' => ['href' => '#'],
        ],
        'A simple secondary list group item' => [
            'variant' => 'secondary',
            'attributes' => ['href' => '#'],
        ],
        'A simple success list group item' => [
            'variant' => 'success',
            'attributes' => ['href' => '#'],
        ],
        'A simple danger list group item' => [
            'variant' => 'danger',
            'attributes' => ['href' => '#'],
        ],
        'A simple warning list group item' => [
            'variant' => 'warning',
            'attributes' => ['href' => '#'],
        ],
        'A simple info list group item' => [
            'variant' => 'info',
            'attributes' => ['href' => '#'],
        ],
        'A simple light list group item' => [
            'variant' => 'light',
            'attributes' => ['href' => '#'],
        ],
        'A simple dark list group item' => [
            'variant' => 'dark',
            'attributes' => ['href' => '#'],
        ],
    ],
    ['type' => 'action']
);

With badges

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->listGroup(
    [
        'A list item' => [
            'badge' => [
                14,
                ['type' => 'pill', 'variant' => 'primary'],
            ],
        ],
        'A second list item' => [
            'badge' => [
                2,
                ['type' => 'pill', 'variant' => 'primary'],
            ],
        ],
        'A third list item' => [
            'badge' => [
                1,
                ['type' => 'pill', 'variant' => 'primary'],
            ],
        ],
    ]
);

Custom content

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->listGroup(
    [
        [
            'content' => '<div class="d-flex w-100 justify-content-between">' .
            '    <h5 class="mb-1">List group item heading</h5>' .
            '    <small>3 days ago</small>' .
            '</div>' .
            '<p class="mb-1">Some placeholder content in a paragraph.</p>' .
            '<small>And some small print.</small>',
            'attributes' => ['href' => '#'],
            'active' => true,
        ],
        [
            'content' => '<div class="d-flex w-100 justify-content-between">' .
            '    <h5 class="mb-1">List group item heading</h5>' .
            '    <small>3 days ago</small>' .
            '</div>' .
            '<p class="mb-1">Some placeholder content in a paragraph.</p>' .
            '<small>And some small print.</small>',
            'attributes' => ['href' => '#'],
        ],
        [
            'content' => '<div class="d-flex w-100 justify-content-between">' .
            '    <h5 class="mb-1">List group item heading</h5>' .
            '    <small>3 days ago</small>' .
            '</div>' .
            '<p class="mb-1">Donec id elit non mi porta gravida at eget metus. ' .
            'Maecenas sed diam eget risus varius blandit.</p>' .
            '<small>Donec id elit non mi porta.</small>',
            'attributes' => ['href' => '#'],
        ],
    ],
    ['type' => 'action']
);

Checkboxes and radios

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->listGroup(
    [
        'First checkbox' => [
            'checkbox' => ['attributes' => ['aria-label' => '...']],
        ],
        'Second checkbox' => [
            'checkbox' => ['attributes' => ['aria-label' => '...']],
        ],
        'First checkbox' => [
            'checkbox' => ['attributes' => ['aria-label' => '...']],
        ],
        'Third checkbox' => [
            'checkbox' => ['attributes' => ['aria-label' => '...']],
        ],
        'Fourth checkbox' => [
            'checkbox' => ['attributes' => ['aria-label' => '...']],
        ],
    ],
);

echo PHP_EOL . '<br/>';

echo $this->listGroup(
    [
        'First checkbox' => [
            'checkbox' => ['label' => true],
        ],
        'Second checkbox' => [
            'checkbox' => ['label' => true],
        ],
        'First checkbox' => [
            'checkbox' => ['label' => true],
        ],
        'Third checkbox' => [
            'checkbox' => ['label' => true],
        ],
        'Fourth checkbox' => [
            'checkbox' => ['label' => true],
        ],
    ],
);