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

  • 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

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.