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 (10 lines)
1
2
3
4
5
6
7
8
9
10
<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 (8 lines)
1
2
3
4
5
6
7
8
<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 (8 lines)
1
2
3
4
5
6
7
8
<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 (24 lines)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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 (28 lines)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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 (59 lines)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<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>

Component List

Alerts
Alerts, announcements, updates, information

Content Blocks
Draw attention to or bundle a section of content

Labels and Badges
Labels, tags, badges, counts, etc

Link Buttons
Links that look like buttons

Statistics
Highlighting numbers of things

Website Components
Buttons, alerts, forms, and various other page elements

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.