List Groups

Displaying lists of links

Overview

List groups are normally used to display lists of links. Below we have a .list-group ul and a .list-group ol. Often we put these inside .content-block divs as well, but this is not required.

ul and ol list groups
<ul class="list-group">
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>
    <li><a href="#">Item Three</a></li>
</ul>
<ol class="list-group">
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>
    <li><a href="#">Item Three</a></li>
</ol>

Two Column List Groups

The .list-group lists can use two columns by adding the class .list-group-2-col.

Two column list group
<div class="content-block">
    <ul class="list-group list-group-2-col">
        <li><a href="#">Item One</a></li>
        <li><a href="#">Item Two</a></li>
        <li><a href="#">Item Three</a></li>
        <li><a href="#">Item Four</a></li>
    </ul>
</div>

Spacing

Using the class .condensed uses less padding inside list group items.

Condensed list group
<div class="content-block">
    <ul class="list-group list-group-2-col condensed">
        <li><a href="#">Item One</a></li>
        <li><a href="#">Item Two</a></li>
        <li><a href="#">Item Three</a></li>
        <li><a href="#">Item Four</a></li>
    </ul>
</div>

Links With Descriptions

Adding the class .has-descriptions makes the links slightly larger and all other text a lighter shade of gray.

List group with descriptions
<div class="content-block">
    <ul class="list-group list-group-2-col has-descriptions">
        <li>
            <a href="#">Item One</a>
            <br>
            Item one description
        </li>
        <li>
            <a href="#">Item Two</a>
            <br>
            Item two description
        </li>
        <li>
            <a href="#">Item Three</a>
            <br>
            Item three description
        </li>
        <li>
            <a href="#">Item Four</a>
            <br>
            Item four description
        </li>
    </ul>
</div>

Icons

Add icons to your list items and give the ul the class .has-icons.

List group with icons
<div class="content-block">
    <ul class="list-group list-group-2-col has-descriptions has-icons">
        <li>
            <span class="glyphicons glyphicons-snowflake list-item-icon"></span>
            <a href="#">Item One</a>
            <br>
            Item one description
        </li>
        <li>
            <span class="glyphicons glyphicons-wrench list-item-icon"></span>
            <a href="#">Item Two</a>
            <br>
            Item two description
        </li>
        <li>
            <span class="glyphicons glyphicons-alert list-item-icon"></span>
            <a href="#">Item Three</a>
            <br>
            Item three description
        </li>
        <li>
            <span class="glyphicons glyphicons-user list-item-icon"></span>
            <a href="#">Item Four</a>
            <br>
            Item four description
        </li>
    </ul>
</div>

Event List Groups

To display a list of events that link to details, add the class .event-list to your list group. Inside each list item there are separate divs with .event-list-date and .event-list-details.

Event list group
<ul class="list-group event-list">
    <li>
        <div class="event-list-date">
            <span class="event-list-month">
                Aug
            </span>
            <span class="event-list-day">
                28
            </span>
        </div>
        <div class="event-list-details">
            <a href="#">
                ERS Board of Trustees
            </a>
            <br>
            <span class="small">
                01:30 PM, Employees Retirement System Board of Trustees
            </span>
        </div>
    </li>
    <li>
        <div class="event-list-date">
            <span class="event-list-month">
                Aug
            </span>
            <span class="event-list-day">
                28
            </span>
        </div>
        <div class="event-list-details">
            <a href="#">
                Preservation Board Meeting
            </a>
            <br>
            <span class="small">
                04:00 PM, Preservation Board
            </span>
        </div>
    </li>
    <li>
        <div class="event-list-date">
            <span class="event-list-month">
                Aug
            </span>
            <span class="event-list-day">
                29
            </span>
        </div>
        <div class="event-list-details">
            <a href="#">
                Land Tax Sale 189
            </a>
            <br>
            <span class="small">
                09:00 AM, Office of the Sheriff
            </span>
        </div>
    </li>
</ul>

List Group Cards

Show lists of things in a flex-based "card" layout by adding the class list-group-cards to the list element. We also have a custom tag for this.

The default flex layout is 50% wide for each list item. You can change this to be 100% wide or 33% wide by adding the following classes: 

  • list-group-cards-100
  • list-group-cards-33

Sections

Each card should at least have a title, and can optionally also have an image, description, and tags.

The "tags" section is used at the bottom and has smaller text. If you'd like it to be pinned to the bottom of the card with a visible separator, add the class list-group-footer to that element as well.

Examples

List group cards - basic
<ul class="list-group list-group-cards">
    <li class="">
        <span class="list-group-title">
            <a href="/government/departments/parks/parks/browse-parks/view-park.cfm?parkID=116&amp;parkName=Aboussie+Park" class="">Aboussie Park</a>
        </span>
        <span class="list-group-description">
            Recognized as the smallest of all city parks, covering a mere 0.4 acre, this park is surrounded by well-kept St. Louis brick homes with manicured front lawns and gardens.
        </span>
        <span class="list-group-tags list-group-footer">
            0.40 acres | Established in 1981
        </span>
    </li>
    <li class="">
        <span class="list-group-title">
            <a href="/government/departments/parks/parks/browse-parks/view-park.cfm?parkID=17&amp;parkName=Benton+Park">Benton Park</a>
        </span>
        <span class="list-group-description">
            In recent years, Benton Park has been completely remodeled and landscaped with the City's neighborhood rehabilitation funds derived from the sale of City property, as part of the Cherokee Pilot Rehabilitation Area.
        </span>
        <span class="list-group-tags list-group-footer">
            14.30 acres | Established in 1866
        </span>
    </li>
    <li class="">
        <span class="list-group-title">
            <a href="/government/departments/parks/parks/browse-parks/view-park.cfm?parkID=22&amp;parkName=Carnegie+Park" class="">Carnegie Park</a>
        </span>
        <span class="list-group-description">
            Carnegie Park was originally intended for market purposes, but property owners protested and that scheme was abandoned. The Park Department was then put in charge of the playground. It was developed into a public park in 1904.
        </span>
        <span class="list-group-tags list-group-footer">
            2.07 acres | Established in 1899
        </span>
    </li>
</ul>
  • Aboussie Park Recognized as the smallest of all city parks, covering a mere 0.4 acre, this park is surrounded by well-kept St. Louis brick homes with manicured front lawns and gardens. 0.40 acres | Established in 1981
  • Benton Park In recent years, Benton Park has been completely remodeled and landscaped with the City's neighborhood rehabilitation funds derived from the sale of City property, as part of the Cherokee Pilot Rehabilitation Area. 14.30 acres | Established in 1866
  • Carnegie Park Carnegie Park was originally intended for market purposes, but property owners protested and that scheme was abandoned. The Park Department was then put in charge of the playground. It was developed into a public park in 1904. 2.07 acres | Established in 1899
List group cards - adding images and changing layout
<ul class="list-group list-group-cards list-group-cards-33">
    <li>
        <span class="list-group-image" style="background-image:url(/government/departments/parks/parks/images/116-22515104042220-medium.jpg)"></span>
        <span class="list-group-title">
            <a href="/government/departments/parks/parks/browse-parks/view-park.cfm?parkID=116&amp;parkName=Aboussie+Park">
                Aboussie Park
            </a>
        </span>
        <span class="list-group-tags">
            0.40 acres | Established in 1981
        </span>
    </li>
    <li>
        <span class="list-group-cards-image-small" style="background-image:url(/government/departments/parks/parks/images/17-2281495659978-medium.jpg)"></span>
        <span class="list-group-title">
            <a href="/government/departments/parks/parks/browse-parks/view-park.cfm?parkID=17&amp;parkName=Benton+Park">
                Benton Park
            </a>
        </span>
        <span class="list-group-tags">
            14.30 acres | Established in 1866
        </span>
    </li>
    <li>
        <span class="list-group-cards-image-small" style="background-image:url(/government/departments/parks/parks/images/22-22814144120182-medium.JPG)"></span>
        <span class="list-group-title">
            <a href="/government/departments/parks/parks/browse-parks/view-park.cfm?parkID=22&amp;parkName=Carnegie+Park">
                Carnegie Park
            </a>
        </span>
        <span class="list-group-tags">
            2.07 acres | Established in 1899
        </span>
    </li>
</ul>
List group cards - adding small images
<ul class="list-group list-group-cards">
    <li class="has-small-image">
        <span class="list-group-cards-image-small" style="background-image:url(/government/departments/parks/parks/images/116-22515104042220-small.jpg)"></span>
        <span class="list-group-content">
            <span class="list-group-title">
                <a href="/government/departments/parks/parks/browse-parks/view-park.cfm?parkID=116&amp;parkName=Aboussie+Park">Aboussie Park</a>
            </span>
            <span class="list-group-tags">
                0.40 acres | Established in 1981
            </span>
        </span>
    </li>
    <li class="has-small-image">
        <span class="list-group-cards-image-small" style="background-image:url(/government/departments/parks/parks/images/17-2281495659978-small.jpg)"></span>
        <span class="list-group-content">
            <span class="list-group-title">
                <a href="/government/departments/parks/parks/browse-parks/view-park.cfm?parkID=17&amp;parkName=Benton+Park">Benton Park</a>
            </span>
            <span class="list-group-tags">
                14.30 acres | Established in 1866
            </span>
        </span>
    </li>
    <li class="has-small-image">
        <span class="list-group-cards-image-small" style="background-image:url(/government/departments/parks/parks/images/22-22814144120182-small.JPG)"></span>
        <span class="list-group-content">
            <span class="list-group-title">
                <a href="/government/departments/parks/parks/browse-parks/view-park.cfm?parkID=22&amp;parkName=Carnegie+Park">Carnegie Park</a>
            </span>
            <span class="list-group-tags">
                2.07 acres | Established in 1899
            </span>
        </span>
    </li>
</ul>

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.