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>

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>