Listes

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>
	

<dl class="dl-inline">
	<dt>Terme :</dt>
	<dd>Description courte</dd>
	<dt>Terme :</dt>
	<dd>Description courte</dd>
	<dt>Terme :</dt>
	<dd>Description courte</dd>
	<dt>Terme :</dt>
	<dd>Description courte</dd>
	<dt>Terme :</dt>
	<dd>Description courte</dd>
</dl>