Lexicon v1.0.32

List Groups

Tabular List Group

Align content inside a list-group like a table with .tabular-list-group.

.list-group-item behaves as a table row.

Use a combination of .list-group-item-field and .list-group-item-content to control the size of each cell. .list-group-item-field has width: 1% and will expand only as wide as its content as long as .list-group-item-content is present as a sibling.

.list-group-item-content will expand to fill the remaining space.

In IE9 the class truncate-text is unsupported in tabular-list-groups and will break to a new line. 
<ul class="tabular-list-group">
    <li class="list-group-item">
        <div class="list-group-item-field">
            <div class="checkbox">
                <label>
                    <input type="checkbox" />
                </label>
            </div>
        </div>

        <div class="list-group-item-field">
            <div class="sticker sticker-default sticker-lg sticker-static">
                <span aria-label="icon-folder" class="lexicon-icon-container" role="img">
                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
                        <use xlink:href="../../images/icons/icons.svg#folder" />
                    </svg>
                </span>
            </div>
        </div>

        <div class="list-group-item-content">
            <h6 class="truncate-text">Alberto Calvo, modified 2 hours ago.</h6>
            <h4 class="truncate-text"><a href="#1">ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</a></h4>
            <h6 class="truncate-text">Approved</h6>
        </div>

        <div class="list-group-item-field">
            <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#1">
                    <span aria-label="icon-ellipsis-v" class="lexicon-icon-container" role="img">
                        <svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-ellipsis-v">
                            <use xlink:href="../../images/icons/icons.svg#ellipsis-v" />
                        </svg>
                    </span>
                </a>
                <ul class="dropdown-menu dropdown-menu-left-side">
                    <li class="dropdown-header">Dropdown Header</li>
                    <li><a href="#">Action 1</a></li>
                    <li><a href="#">Action 2</a></li>
                    <li><a href="#">Action 3</a></li>
                    <li><a href="#">Action 4</a></li>
                    <li><a href="#">Action 5</a></li>
                    <li><a href="#">Action 6</a></li>
                    <li><a href="#">Action 7</a></li>
                    <li><a href="#">Action 8</a></li>
                </ul>
            </div>
        </div>
    </li>

    <li class="list-group-item">
        <div class="list-group-item-field">
            <div class="checkbox">
                <label>
                    <input type="checkbox" />
                </label>
            </div>
        </div>

        <div class="list-group-item-field">
            <div class="sticker sticker-default sticker-lg sticker-static">
                <span aria-label="icon-folder" class="lexicon-icon-container" role="img">
                    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
                        <use xlink:href="../../images/icons/icons.svg#folder" />
                    </svg>
                </span>
            </div>
        </div>

        <div class="list-group-item-content">
            <h5>Bookmarks</h5>
            <h4><a href="#1">ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.</a></h4>
            <h6>
                <span>5 Folders</span>
                <span>4 Entries</span>
            </h6>
        </div>

        <div class="list-group-item-field">
            <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#1">
                    <span aria-label="icon-ellipsis-v" class="lexicon-icon-container" role="img">
                        <svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-ellipsis-v">
                            <use xlink:href="../../images/icons/icons.svg#ellipsis-v" />
                        </svg>
                    </span>
                </a>
                <ul class="dropdown-menu dropdown-menu-left-side">
                    <li class="dropdown-header">Dropdown Header</li>
                    <li><a href="#">Action 1</a></li>
                    <li><a href="#">Action 2</a></li>
                    <li><a href="#">Action 3</a></li>
                    <li><a href="#">Action 4</a></li>
                    <li><a href="#">Action 5</a></li>
                    <li><a href="#">Action 6</a></li>
                    <li><a href="#">Action 7</a></li>
                    <li><a href="#">Action 8</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

Tabular List Group No Borders

Tabular List Group rows are bordered by default. You can remove borders by adding .no-borders to .tabular-list-group.

<ul class="no-borders tabular-list-group">...</ul>

Tabular List Group Full Borders

Similarly, you can add borders around each cell with .full-borders.

<ul class="full-borders tabular-list-group">...</ul>

Tabular List Group Unstyled

A less opinionated and simplified version of tabular-list-group to help layout small bits of content inside other components such as sidebar. The component tabular-list-group-unstyled doesn't split into columns; to make tabular-list-group-unstyled split into columns, add display: table; to the class tabular-list-group-unstyled and display: table-row; to list-group-item.

List Group

Use .list-group or .linked-list-group to quickly assemble a list of elements such as a checklist, vertical navigation, or a news feed.

To create collapsible list groups with multiple headings see Extending List Groups.

  • List Heading
  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
<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>
</ul>

Linked List Groups

List Group Heading
List Item 1 List Item 2 List Item 3 List Item 4 
<div class="list-group">
    <a class="list-group-item" href="#">...</a>
</div>

Contextual List Group

  • List Item 1 - Success
  • List Item 2 - Info
  • List Item 3 - Warning
  • List Item 4 - Danger
<ul class="list-group">
    <li class="list-group-item list-group-item-success">...</li>
</ul>

Linked Contextual List Groups

List Item 1 - Success List Item 2 - Info List Item 3 - Warning List Item 4 - Danger
List Item 1 - Active Success List Item 2 - Active Info List Item 3 - Active Warning List Item 4 - Active Danger 
<div class="list-group">
    <a class="active list-group-item list-group-item-success" href="#">...</a>
</div>

Tabular List Group Item States

Deprecated Tabular List Group Item States as of v1.0.9 and will be removed in v2.0.0.
<ul class="tabular-list-group">
    <li class="list-group-item list-group-item-success">...</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-default">...</li>
    <li class="list-group-item list-group-item-primary">...</li>
    <li class="list-group-item list-group-item-danger">...</li>
</ul>

List Group Card

Deprecated list-group-card as of v1.0.9 and will be removed in v2.0.0.

Add class list-group-card to list-group then put a checkbox-card in a list-group-item.

Hide Checkboxes in Mobile

Deprecated list-group-card-checkbox-hidden-xs as of v1.0.9 and will be removed in v2.0.0.

Add class list-group-card-checkbox-hidden-xs to list-group-card to hide input[type="checkbox"] in mobile, then wrap your icon or user-icon with list-group-card-icon to toggle the check icon.

The check icon can be customized through the variable $list-group-card-checkbox-hidden-icon.