Lists

Unordered lists

• List item 1
• List item 2
• List item 3

Code

<ul>
	<li>...</li>
	</ul>

Ordered lists

1. List item 1
2. List item 2
3. List item 3

Code

<ol>
<li>...</li>
</ol>

Definition lists

Term 1

Definition of term 1

Term 2

Definition of term 2

// Data list
<dl>

// Data term:
<dt>...</dt>

// Data definition:
<dd>...</dd>
</dl>

Unstyled lists

Unstyled list:

• List item 1
• List item 2
  • List item 2a
  • List item 2b
• List item 3

Unstyled nested list:

• List item 1
• List item 2
  • List item 2a
  • List item 2b
• List item 3

Code

//Unstyled list:
<ul class="list-unstyled">
	<li>...</li>
</ul>

//Unstyled nested list:
<ul>
	<li>List item 1
		<ul class="lst-none">
			<li>List item 1a</li>
			<li>List item 1b</li>
		</ul>
	</li>
</ul>

Numbered lists

1. List item 1
2. List item 2
   1. List item 2a
   2. List item 2b
3. List item 3

Code

<ol>
<li>...
	<ol class="lst-num">
	<li>...</li>
	</ol>
</li>
<li>...</li>
</ol>

Alpha lists − Lower alpha

1. List item 1
2. List item 2
   1. List item 2a
   2. List item 2b
3. List item 3

Code

<ol>
<li>...
	<ol class="lst-lwr-alph">
	<li>...</li>
	</ol>
</li>
<li>...</li>
</ol>

Alpha lists − Upper alpha

1. List item 1
2. List item 2
   1. List item 2a
   2. List item 2b
3. List item 3

Code

<ol class="lst-upr-alph">
<li>...</li>
</ol>

Roman numeral − Lower Roman

1. List item 1
2. List item 2
   1. List item 2a
   2. List item 2b
3. List item 3

Code

<ol>
<li>...
	<ol class="lst-lwr-rmn">
	<li>...</li>
	</ol>
</li>
<li>...</li>
</ol>

Roman numeral − Upper Roman

1. List item 1
2. List item 2
   1. List item 2a
   2. List item 2b
3. List item 3

Code

<ol class="lst-upr-rmn">
	<li>...</li>
</ol>

List inline

• List item 1
• List item 2
• List item 3

Code

<ol class="list-inline">
	<li>...</li>
</ol>

Spacing lists - spaces added

• List item 1
• List item 2
• List item 3

Code

// Spaced list:
<ul class="lst-spcd">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

Definition lists − horizontal layout

Term 1

Definition of term 1

Term 2

Definition of term 2

With no border

Term 1

Definition of term 1

Term 2

Definition of term 2

Code

<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
//With no border
<dl class="dl-horizontal brdr-0">
<dt>...</dt>
<dd>...</dd>
</dl>

List columns

• .colcount-xxs-2, .colcount-xs-2, .colcount-sm-2, .colcount-md-2, .colcount-lg-2, .colcount-xl-2
• .colcount-xxs-3, .colcount-xs-3, .colcount-sm-3, .colcount-md-3, .colcount-lg-3, .colcount-xl-3
• .colcount-xxs-4, .colcount-xs-4, .colcount-sm-4, .colcount-md-4, .colcount-lg-4, .colcount-xl-4

Appearance − Two columns

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8

code

<ul class="colcount-sm-2">
<li>Item 1</li>
...
<li>Item 8</li>
</ul>

Appearance − Three columns

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8

code

<ul class="colcount-sm-3">
<li>Item 1</li>
...
<li>Item 8</li>
</ul>

Appearance − Four columns

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8

<ul class="colcount-sm-4">
<li>Item 1</li>
...
<li>Item 8</li>
</ul>

Appearance − Multi-class

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8

<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4">
<li>Item 1</li>
...
<li>Item 8</li>
</ul>

.colcount-no-break

Prevents list items from splitting across multiple list columns.

Unordered list

Working example

• Item 1
  Line 2
  Line 3
• Item 2
  Line 2
  Line 3
• Item 3
• Item 4
  Line 2
  Line 3
• Item 5
  Line 2
  Line 3
• Item 6
  Line 2
• Item 7
  Line 2
• Item 8

code

<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4 colcount-no-break">
	<li>Item 1<br>Line 2<br>Line 3</li>
	<li>Item 2<br>Line 2<br>Line 3</li>
	<li>Item 3</li>
	<li>Item 4<br>Line 2<br>Line 3</li>
	<li>Item 5<br>Line 2<br>Line 3</li>
	<li>Item 6<br>Line 2</li>
	<li>Item 7<br>Line 2</li>
	<li>Item 8</li>
</ul>

Description list

Working example

Term 1

Description

Term 2

Description
Line 2
Line 3

Term 3

Description
Line 2
Line 3

Term 4

Description
Line 2

Term 5

Description
Line 2

Term 6

Description

code

<dl class="colcount-sm-2 colcount-md-3 colcount-lg-4 colcount-no-break">
	<div>
		<dt>Term 1</dt>
		<dd>Description</dd>
	</div>
	<div>
		<dt>Term 2</dt>
		<dd>Description<br>Line 2<br>Line 3</dd>
	</div>
	<div>
		<dt>Term 3</dt>
		<dd>Description<br>Line 2<br>Line 3</dd>
	</div>
	<div>
		<dt>Term 4</dt>
		<dd>Description<br>Line 2</dd>
	</div>
	<div>
		<dt>Term 5</dt>
		<dd>Description<br>Line 2</dd>
	</div>
	<div>
		<dt>Term 6</dt>
		<dd>Description</dd>
	</div>
</dl>

Responsive list .list-responsive

• Item
• Item
• Item
• Item
• Item

code

<ul class="list-responsive">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

List - Additional styles - GCWeb theme V5

List double spaced .lst-spcd-2

• Item
• Item
• Item
• Item
• Item

code

<ul class="lst-spcd-2">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

Lists in columns .list-col-[breakpoint]-[columns]

• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item

code

<ul class="list-col-xs-1 list-col-sm-2 list-col-md-3 list-col-lg-4">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

Inline description list

Inline description list used to display short terms and descriptions.

Term :

Short description

Term :

Short description

Term :

Short description

Term :

Short description

Term :

Short description

<dl class="dl-inline">
	<dt>Term :</dt>
	<dd>Short description</dd>
	<dt>Term :</dt>
	<dd>Short description</dd>
	<dt>Term :</dt>
	<dd>Short description</dd>
	<dt>Term :</dt>
	<dd>Short description</dd>
	<dt>Term :</dt>
	<dd>Short description</dd>
</dl>

List with compact utility class

Compact list version primarily used for navigation links on navigational page.

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5
• Link 6
• Link 7
• Link 8
• Link 9