diff --git a/common/list/index.json-ld b/common/list/index.json-ld
new file mode 100644
index 000000000..45761605d
--- /dev/null
+++ b/common/list/index.json-ld
@@ -0,0 +1,45 @@
+{
+	"@context": {
+		"@version": 1.1,
+		"dct": "http://purl.org/dc/terms/",
+		"title": { "@id": "dct:title", "@container": "@language" },
+		"description": { "@id": "dct:description", "@container": "@language" },
+		"modified": "dct:modified"
+	},
+	"title": {
+		"en": "List",
+		"fr": "Listes"
+	},
+	"description": {
+		"en": "Example of all the possible styled list variant",
+		"fr": "Example de toutes les possibles variantes de personnalisation de liste."
+	},
+	"modified": "2023-03-05",
+	"componentName": "list",
+	"processing": "baseline",
+	"status": "stable",
+	"pages": {
+		"examples": [
+			{
+				"title": "Lists",
+				"language": "en",
+				"path": "lists-en.html"
+			},
+			{
+				"title": "Listes",
+				"language": "fr",
+				"path": "lists-fr.html"
+			},
+			{
+				"title": "List group",
+				"language": "en",
+				"path": "list-group-en.html"
+			},
+			{
+				"title": "Liste groupé",
+				"language": "fr",
+				"path": "list-group-fr.html"
+			}
+		]
+	}
+}
diff --git a/common/list/list-group-en.html b/common/list/list-group-en.html
new file mode 100644
index 000000000..8ca08566b
--- /dev/null
+++ b/common/list/list-group-en.html
@@ -0,0 +1,167 @@
+---
+{
+	"title": "List group",
+	"language": "en",
+	"altLangPage": "list-group-fr.html",
+	"breadcrumbs": [
+		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-fr.html" }
+	],
+	"dateModified": "2023-03-05"
+}
+---
+
+<div class="wb-prettify all-pre"></div>
+<h2>Basic use: Default</h2>
+<p>No links:</p>
+<ul class="list-group">
+	<li class="list-group-item">Text</li>
+	<li class="list-group-item">Text</li>
+</ul>
+<p>With links:</p>
+<div class="list-group">
+	<a href="#" class="list-group-item">Link text</a>
+	<a href="#" class="list-group-item active">Link text (active item)</a>
+	<a href="#" class="list-group-item">Link text</a>
+</div>
+<h3>Code</h3>
+<pre><code>&lt;p&gt;No links:&lt;/p&gt;
+&lt;ul class="list-group"&gt;
+	&lt;li class="list-group-item"&gt;Text&lt;/li&gt;
+	&lt;li class="list-group-item"&gt;Text&lt;/li&gt;
+&lt;/ul&gt;
+&lt;p&gt;With links:&lt;/p&gt;
+&lt;div class="list-group"&gt;
+	&lt;a href="#" class="list-group-item"&gt;Link text&lt;/a&gt;
+	&lt;a href="#" class="list-group-item active"&gt;Link text (active item)&lt;/a&gt;
+	&lt;a href="#" class="list-group-item"&gt;Link text&lt;/a&gt;
+&lt;/div&gt;</code></pre>
+
+<h2>Enhanced use</h2>
+<h3>Colours</h3>
+<p>No links:</p>
+<ul class="list-group">
+	<li class="list-group-item list-group-item-success">Text</li>
+	<li class="list-group-item list-group-item-info">Text</li>
+	<li class="list-group-item list-group-item-warning">Text</li>
+	<li class="list-group-item list-group-item-danger">Text</li>
+</ul>
+<p>With links:</p>
+<div class="list-group">
+	<a href="#" class="list-group-item list-group-item-success">Link text</a>
+	<a href="#" class="list-group-item list-group-item-info">Link text</a>
+	<a href="#" class="list-group-item list-group-item-warning">Link text</a>
+	<a href="#" class="list-group-item list-group-item-danger">Link text</a>
+</div>
+<div class="list-group">
+	<a href="#" class="list-group-item list-group-item-success active">Link text (active item)</a>
+	<a href="#" class="list-group-item list-group-item-info active">Link text (active item)</a>
+	<a href="#" class="list-group-item list-group-item-warning active">Link text (active item)</a>
+	<a href="#" class="list-group-item list-group-item-danger active">Link text (active item)</a>
+</div>
+<h4>Code</h4>
+<pre><code>&lt;p&gt;No links:&lt;/p&gt;
+&lt;ul class="list-group"&gt;
+	&lt;li class="list-group-item list-group-item-success"&gt;Text&lt;/li&gt;
+	&lt;li class="list-group-item list-group-item-info"&gt;Text&lt;/li&gt;
+	&lt;li class="list-group-item list-group-item-warning"&gt;Text&lt;/li&gt;
+	&lt;li class="list-group-item list-group-item-danger"&gt;Text&lt;/li&gt;
+&lt;/ul&gt;
+&lt;p&gt;With links:&lt;/p&gt;
+&lt;div class="list-group"&gt;
+	&lt;a href="#" class="list-group-item list-group-item-success"&gt;Link text&lt;/a&gt;
+	&lt;a href="#" class="list-group-item list-group-item-info"&gt;Link text&lt;/a&gt;
+	&lt;a href="#" class="list-group-item list-group-item-warning"&gt;Link text&lt;/a&gt;
+	&lt;a href="#" class="list-group-item list-group-item-danger"&gt;Link text&lt;/a&gt;
+&lt;/div&gt;
+&lt;div class="list-group"&gt;
+	&lt;a href="#" class="list-group-item list-group-item-success active"&gt;Link text (active item)&lt;/a&gt;
+	&lt;a href="#" class="list-group-item list-group-item-info active"&gt;Link text (active item)&lt;/a&gt;
+	&lt;a href="#" class="list-group-item list-group-item-warning active"&gt;Link text (active item)&lt;/a&gt;
+	&lt;a href="#" class="list-group-item list-group-item-danger active"&gt;Link text (active item)&lt;/a&gt;
+&lt;/div&gt;</code></pre>
+
+<h3>Badges</h3>
+<div class="panel-body">
+	<p>No links:</p>
+	<ul class="list-group">
+		<li class="list-group-item"><span class="badge">14</span> Text</li>
+		<li class="list-group-item"><span class="badge">2</span> Text</li>
+	</ul>
+	<p>With links:</p>
+	<div class="list-group">
+		<a href="#" class="list-group-item"><span class="badge">14</span> Link text</a>
+		<a href="#" class="list-group-item active"><span class="badge">2</span> Link text (active item)</a>
+		<a href="#" class="list-group-item"><span class="badge">5</span> Link text</a>
+	</div>
+</div>
+<h4>Code</h4>
+<pre><code>&lt;div class="panel-body"&gt;
+	&lt;p&gt;No links:&lt;/p&gt;
+	&lt;ul class="list-group"&gt;
+		&lt;li class="list-group-item"&gt;&lt;span class="badge"&gt;14&lt;/span&gt; Text&lt;/li&gt;
+		&lt;li class="list-group-item"&gt;&lt;span class="badge"&gt;2&lt;/span&gt; Text&lt;/li&gt;
+	&lt;/ul&gt;
+	&lt;p&gt;With links:&lt;/p&gt;
+	&lt;div class="list-group"&gt;
+		&lt;a href="#" class="list-group-item"&gt;&lt;span class="badge"&gt;14&lt;/span&gt; Link text&lt;/a&gt;
+		&lt;a href="#" class="list-group-item active"&gt;&lt;span class="badge"&gt;2&lt;/span&gt; Link text (active item)&lt;/a&gt;
+		&lt;a href="#" class="list-group-item"&gt;&lt;span class="badge"&gt;5&lt;/span&gt; Link text&lt;/a&gt;
+	&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h3>Complex content </h3>
+<p> The following content are not compliant to accessibility and they are there only for example purpose. <a href="#skipComplexContent">Skip this non-accessible content section.</a></p>
+<p>No links:</p>
+<ul class="list-group">
+	<li class="list-group-item">
+		<h3 class="list-group-item-heading">Heading</h3>
+		<p class="list-group-item-text">Content</p>
+	</li>
+	<li class="list-group-item">
+		<h3 class="list-group-item-heading">Heading</h3>
+		<p class="list-group-item-text">Content</p>
+	</li>
+</ul>
+<p>With links:</p>
+<div class="list-group">
+	<a href="#" class="list-group-item">
+		<h3 class="list-group-item-heading">Heading</h3>
+		<p class="list-group-item-text">Content</p>
+	</a>
+	<a href="#" class="list-group-item active">
+		<h3 class="list-group-item-heading">Heading</h3>
+		<p class="list-group-item-text">Content</p>
+	</a>
+	<a href="#" class="list-group-item">
+		<h3 class="list-group-item-heading">Heading</h3>
+		<p class="list-group-item-text">Content</p>
+	</a>
+</div>
+<h4>Code</h4>
+<pre><code>&lt;p&gt;No links:&lt;/p&gt;
+&lt;ul class="list-group"&gt;
+	&lt;li class="list-group-item"&gt;
+		&lt;h3 class="list-group-item-heading"&gt;Heading&lt;/h3&gt;
+		&lt;p class="list-group-item-text"&gt;Content&lt;/p&gt;
+	&lt;/li&gt;
+	&lt;li class="list-group-item"&gt;
+		&lt;h3 class="list-group-item-heading"&gt;Heading&lt;/h3&gt;
+		&lt;p class="list-group-item-text"&gt;Content&lt;/p&gt;
+	&lt;/li&gt;
+&lt;/ul&gt;
+&lt;p&gt;With links:&lt;/p&gt;
+&lt;div class="list-group"&gt;
+	&lt;a href="#" class="list-group-item"&gt;
+		&lt;h3 class="list-group-item-heading"&gt;Heading&lt;/h3&gt;
+		&lt;p class="list-group-item-text"&gt;Content&lt;/p&gt;
+	&lt;/a&gt;
+	&lt;a href="#" class="list-group-item active"&gt;
+		&lt;h3 class="list-group-item-heading"&gt;Heading&lt;/h3&gt;
+		&lt;p class="list-group-item-text"&gt;Content&lt;/p&gt;
+	&lt;/a&gt;
+	&lt;a href="#" class="list-group-item"&gt;
+		&lt;h3 class="list-group-item-heading"&gt;Heading&lt;/h3&gt;
+		&lt;p class="list-group-item-text"&gt;Content&lt;/p&gt;
+	&lt;/a&gt;
+&lt;/div&gt;</code></pre>
+<div id="skipComplexContent"></div>
diff --git a/common/list/list-group-fr.html b/common/list/list-group-fr.html
new file mode 100644
index 000000000..88481a939
--- /dev/null
+++ b/common/list/list-group-fr.html
@@ -0,0 +1,170 @@
+---
+{
+	"title": "Liste groupé",
+	"language": "fr",
+	"altLangPage": "list-group-en.html",
+	"breadcrumbs": [
+		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-fr.html" }
+	],
+	"dateModified": "2023-03-05"
+}
+---
+
+<div class="wb-prettify all-pre"></div>
+<p>Cette page nécessite une traduction.</p>
+<div lang="en">
+	<h2>Basic use: Default</h2>
+	<p>No links:</p>
+	<ul class="list-group">
+		<li class="list-group-item">Text</li>
+		<li class="list-group-item">Text</li>
+	</ul>
+	<p>With links:</p>
+	<div class="list-group">
+		<a href="#" class="list-group-item">Link text</a>
+		<a href="#" class="list-group-item active">Link text (active item)</a>
+		<a href="#" class="list-group-item">Link text</a>
+	</div>
+	<h3>Code</h3>
+	<pre><code>&lt;p&gt;No links:&lt;/p&gt;
+	&lt;ul class="list-group"&gt;
+		&lt;li class="list-group-item"&gt;Text&lt;/li&gt;
+		&lt;li class="list-group-item"&gt;Text&lt;/li&gt;
+	&lt;/ul&gt;
+	&lt;p&gt;With links:&lt;/p&gt;
+	&lt;div class="list-group"&gt;
+		&lt;a href="#" class="list-group-item"&gt;Link text&lt;/a&gt;
+		&lt;a href="#" class="list-group-item active"&gt;Link text (active item)&lt;/a&gt;
+		&lt;a href="#" class="list-group-item"&gt;Link text&lt;/a&gt;
+	&lt;/div&gt;</code></pre>
+
+	<h2>Enhanced use</h2>
+	<h3>Colours</h3>
+	<p>No links:</p>
+	<ul class="list-group">
+		<li class="list-group-item list-group-item-success">Text</li>
+		<li class="list-group-item list-group-item-info">Text</li>
+		<li class="list-group-item list-group-item-warning">Text</li>
+		<li class="list-group-item list-group-item-danger">Text</li>
+	</ul>
+	<p>With links:</p>
+	<div class="list-group">
+		<a href="#" class="list-group-item list-group-item-success">Link text</a>
+		<a href="#" class="list-group-item list-group-item-info">Link text</a>
+		<a href="#" class="list-group-item list-group-item-warning">Link text</a>
+		<a href="#" class="list-group-item list-group-item-danger">Link text</a>
+	</div>
+	<div class="list-group">
+		<a href="#" class="list-group-item list-group-item-success active">Link text (active item)</a>
+		<a href="#" class="list-group-item list-group-item-info active">Link text (active item)</a>
+		<a href="#" class="list-group-item list-group-item-warning active">Link text (active item)</a>
+		<a href="#" class="list-group-item list-group-item-danger active">Link text (active item)</a>
+	</div>
+	<h4>Code</h4>
+	<pre><code>&lt;p&gt;No links:&lt;/p&gt;
+	&lt;ul class="list-group"&gt;
+		&lt;li class="list-group-item list-group-item-success"&gt;Text&lt;/li&gt;
+		&lt;li class="list-group-item list-group-item-info"&gt;Text&lt;/li&gt;
+		&lt;li class="list-group-item list-group-item-warning"&gt;Text&lt;/li&gt;
+		&lt;li class="list-group-item list-group-item-danger"&gt;Text&lt;/li&gt;
+	&lt;/ul&gt;
+	&lt;p&gt;With links:&lt;/p&gt;
+	&lt;div class="list-group"&gt;
+		&lt;a href="#" class="list-group-item list-group-item-success"&gt;Link text&lt;/a&gt;
+		&lt;a href="#" class="list-group-item list-group-item-info"&gt;Link text&lt;/a&gt;
+		&lt;a href="#" class="list-group-item list-group-item-warning"&gt;Link text&lt;/a&gt;
+		&lt;a href="#" class="list-group-item list-group-item-danger"&gt;Link text&lt;/a&gt;
+	&lt;/div&gt;
+	&lt;div class="list-group"&gt;
+		&lt;a href="#" class="list-group-item list-group-item-success active"&gt;Link text (active item)&lt;/a&gt;
+		&lt;a href="#" class="list-group-item list-group-item-info active"&gt;Link text (active item)&lt;/a&gt;
+		&lt;a href="#" class="list-group-item list-group-item-warning active"&gt;Link text (active item)&lt;/a&gt;
+		&lt;a href="#" class="list-group-item list-group-item-danger active"&gt;Link text (active item)&lt;/a&gt;
+	&lt;/div&gt;</code></pre>
+
+	<h3>Badges</h3>
+	<div class="panel-body">
+		<p>No links:</p>
+		<ul class="list-group">
+			<li class="list-group-item"><span class="badge">14</span> Text</li>
+			<li class="list-group-item"><span class="badge">2</span> Text</li>
+		</ul>
+		<p>With links:</p>
+		<div class="list-group">
+			<a href="#" class="list-group-item"><span class="badge">14</span> Link text</a>
+			<a href="#" class="list-group-item active"><span class="badge">2</span> Link text (active item)</a>
+			<a href="#" class="list-group-item"><span class="badge">5</span> Link text</a>
+		</div>
+	</div>
+	<h4>Code</h4>
+	<pre><code>&lt;div class="panel-body"&gt;
+		&lt;p&gt;No links:&lt;/p&gt;
+		&lt;ul class="list-group"&gt;
+			&lt;li class="list-group-item"&gt;&lt;span class="badge"&gt;14&lt;/span&gt; Text&lt;/li&gt;
+			&lt;li class="list-group-item"&gt;&lt;span class="badge"&gt;2&lt;/span&gt; Text&lt;/li&gt;
+		&lt;/ul&gt;
+		&lt;p&gt;With links:&lt;/p&gt;
+		&lt;div class="list-group"&gt;
+			&lt;a href="#" class="list-group-item"&gt;&lt;span class="badge"&gt;14&lt;/span&gt; Link text&lt;/a&gt;
+			&lt;a href="#" class="list-group-item active"&gt;&lt;span class="badge"&gt;2&lt;/span&gt; Link text (active item)&lt;/a&gt;
+			&lt;a href="#" class="list-group-item"&gt;&lt;span class="badge"&gt;5&lt;/span&gt; Link text&lt;/a&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;</code></pre>
+
+	<h3>Complex content </h3>
+	<p> The following content are not compliant to accessibility and they are there only for example purpose. <a href="#skipComplexContent">Skip this non-accessible content section.</a></p>
+	<p>No links:</p>
+	<ul class="list-group">
+		<li class="list-group-item">
+			<h3 class="list-group-item-heading">Heading</h3>
+			<p class="list-group-item-text">Content</p>
+		</li>
+		<li class="list-group-item">
+			<h3 class="list-group-item-heading">Heading</h3>
+			<p class="list-group-item-text">Content</p>
+		</li>
+	</ul>
+	<p>With links:</p>
+	<div class="list-group">
+		<a href="#" class="list-group-item">
+			<h3 class="list-group-item-heading">Heading</h3>
+			<p class="list-group-item-text">Content</p>
+		</a>
+		<a href="#" class="list-group-item active">
+			<h3 class="list-group-item-heading">Heading</h3>
+			<p class="list-group-item-text">Content</p>
+		</a>
+		<a href="#" class="list-group-item">
+			<h3 class="list-group-item-heading">Heading</h3>
+			<p class="list-group-item-text">Content</p>
+		</a>
+	</div>
+	<h4>Code</h4>
+	<pre><code>&lt;p&gt;No links:&lt;/p&gt;
+	&lt;ul class="list-group"&gt;
+		&lt;li class="list-group-item"&gt;
+			&lt;h3 class="list-group-item-heading"&gt;Heading&lt;/h3&gt;
+			&lt;p class="list-group-item-text"&gt;Content&lt;/p&gt;
+		&lt;/li&gt;
+		&lt;li class="list-group-item"&gt;
+			&lt;h3 class="list-group-item-heading"&gt;Heading&lt;/h3&gt;
+			&lt;p class="list-group-item-text"&gt;Content&lt;/p&gt;
+		&lt;/li&gt;
+	&lt;/ul&gt;
+	&lt;p&gt;With links:&lt;/p&gt;
+	&lt;div class="list-group"&gt;
+		&lt;a href="#" class="list-group-item"&gt;
+			&lt;h3 class="list-group-item-heading"&gt;Heading&lt;/h3&gt;
+			&lt;p class="list-group-item-text"&gt;Content&lt;/p&gt;
+		&lt;/a&gt;
+		&lt;a href="#" class="list-group-item active"&gt;
+			&lt;h3 class="list-group-item-heading"&gt;Heading&lt;/h3&gt;
+			&lt;p class="list-group-item-text"&gt;Content&lt;/p&gt;
+		&lt;/a&gt;
+		&lt;a href="#" class="list-group-item"&gt;
+			&lt;h3 class="list-group-item-heading"&gt;Heading&lt;/h3&gt;
+			&lt;p class="list-group-item-text"&gt;Content&lt;/p&gt;
+		&lt;/a&gt;
+	&lt;/div&gt;</code></pre>
+	<div id="skipComplexContent"></div>
+</div>
diff --git a/common/list/lists-en.html b/common/list/lists-en.html
new file mode 100644
index 000000000..f7e586b80
--- /dev/null
+++ b/common/list/lists-en.html
@@ -0,0 +1,385 @@
+---
+{
+	"title": "Lists",
+	"language": "en",
+	"altLangPage": "lists-fr.html",
+	"breadcrumbs": [
+		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }
+	],
+	"dateModified": "2023-03-05"
+}
+---
+<div class="wb-prettify all-pre"></div>
+
+<h2> Unordered lists</h2>
+<ul>
+	<li>List item 1</li>
+	<li>List item 2</li>
+	<li>List item 3</li>
+</ul>
+<h3>Code</h3>
+<pre><code><strong>&lt;ul&gt;</strong>
+	&lt;li&gt;...&lt;/li&gt;
+	&lt;/ul&gt;
+</code></pre>
+
+<h2>Ordered lists </h2>
+<ol>
+	<li>List item 1</li>
+	<li>List item 2</li>
+	<li>List item 3</li>
+</ol>
+<h3>Code</h3>
+<pre><code><strong>&lt;ol&gt;</strong>
+&lt;li&gt;...&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+
+<h2>Definition lists </h2>
+<dl>
+	<dt>Term 1</dt>
+	<dd>Definition of term 1</dd>
+	<dt>Term 2</dt>
+	<dd>Definition of term 2</dd>
+</dl>
+<pre><code>// Data list
+&lt;dl&gt;
+
+// Data term:
+<strong>&lt;dt&gt;</strong>...&lt;/dt&gt;
+
+// Data definition:
+<strong>&lt;dd&gt;</strong>...&lt;/dd&gt;
+&lt;/dl&gt;</code></pre>
+
+<h2>Unstyled lists </h2>
+<p>Unstyled list:</p>
+<ul class="list-unstyled">
+	<li>List item 1</li>
+	<li>List item 2
+	<ul>
+		<li>List item 2a</li>
+		<li>List item 2b</li>
+	</ul>
+	</li>
+	<li>List item 3</li>
+</ul>
+<p>Unstyled nested list:</p>
+<ul>
+	<li>List item 1</li>
+	<li>List item 2</lu>
+	<ul class="lst-none">
+		<li>List item 2a</li>
+		<li>List item 2b</li>
+	</ul>
+	</li>
+	<li>List item 3</li>
+</ul>
+<h3>Code</h3>
+<pre><code>//Unstyled list:
+&lt;ul <strong>class=&quot;list-unstyled&quot;</strong>&gt;
+	&lt;li&gt;...&lt;/li&gt;
+&lt;/ul&gt;
+
+//Unstyled nested list:
+&lt;ul&gt;
+	&lt;li&gt;List item 1
+		&lt;ul <strong>class=&quot;lst-none&quot;</strong>&gt;
+			&lt;li&gt;List item 1a&lt;/li&gt;
+			&lt;li&gt;List item 1b&lt;/li&gt;
+		&lt;/ul&gt;
+	&lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+<h2> Numbered lists </h2>
+<ol>
+	<li>List item 1</li>
+	<li>
+		List item 2
+		<ol class="lst-num">
+			<li>List item 2a</li>
+			<li>List item 2b</li>
+		</ol>
+	</li>
+	<li>List item 3</li>
+</ol>
+<h3>Code</h3>
+<pre><code>&lt;ol&gt;
+&lt;li&gt;...
+	&lt;ol <strong>class=&quot;lst-num&quot;</strong>&gt;
+	&lt;li&gt;...&lt;/li&gt;
+	&lt;/ol&gt;
+&lt;/li&gt;
+&lt;li&gt;...&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+
+<h2>Alpha lists − Lower alpha </h2>
+<ol>
+	<li>List item 1</li>
+	<li>
+		List item 2
+		<ol class="lst-lwr-alph">
+			<li>List item 2a</li>
+			<li>List item 2b</li>
+		</ol>
+	</li>
+	<li>List item 3</li>
+</ol>
+<h3>Code</h3>
+<pre><code>&lt;ol&gt;
+&lt;li&gt;...
+	&lt;ol <strong>class=&quot;lst-lwr-alph&quot;</strong>&gt;
+	&lt;li&gt;...&lt;/li&gt;
+	&lt;/ol&gt;
+&lt;/li&gt;
+&lt;li&gt;...&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+
+<h2> Alpha lists − Upper alpha</h2>
+<ol class="lst-upr-alph">
+	<li>List item 1</li>
+	<li>
+		List item 2
+		<ol>
+			<li>List item 2a</li>
+			<li>List item 2b</li>
+		</ol>
+	</li>
+	<li>List item 3</li>
+</ol>
+<h3>Code</h3>
+<pre><code>&lt;ol <strong>class=&quot;lst-upr-alph&quot;</strong>&gt;
+&lt;li&gt;...&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+
+<h2>Roman numeral − Lower Roman </h2>
+<ol>
+	<li>List item 1</li>
+	<li>
+		List item 2
+		<ol class="lst-lwr-rmn">
+			<li>List item 2a</li>
+			<li>List item 2b</li>
+		</ol>
+	</li>
+	<li>List item 3</li>
+</ol>
+<h3>Code</h3>
+<pre><code>&lt;ol&gt;
+&lt;li&gt;...
+	&lt;ol <strong>class=&quot;lst-lwr-rmn&quot;</strong>&gt;
+	&lt;li&gt;...&lt;/li&gt;
+	&lt;/ol&gt;
+&lt;/li&gt;
+&lt;li&gt;...&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+
+<h2> Roman numeral − Upper Roman </h2>
+<ol class="lst-upr-rmn">
+	<li>List item 1</li>
+	<li>
+		List item 2
+		<ol>
+			<li>List item 2a</li>
+			<li>List item 2b</li>
+		</ol>
+	</li>
+	<li>List item 3</li>
+</ol>
+<h3>Code</h3>
+<pre><code>&lt;ol<strong> class=&quot;lst-upr-rmn&quot;</strong>&gt;
+	&lt;li&gt;...&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+
+<h2> List inline </h2>
+<ul class="list-inline">
+	<li>List item 1</li>
+	<li>List item 2</li>
+	<li>List item 3</li>
+</ul>
+<h3>Code</h3>
+<pre><code>&lt;ol <strong>class=&quot;list-inline&quot;</strong>&gt;
+	&lt;li&gt;...&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+
+<h2> Spacing lists - spaces added</h2>
+<ul class="lst-spcd">
+	<li>List item 1</li>
+	<li>List item 2</li>
+	<li>List item 3</li>
+</ul>
+<h3>Code</h3>
+<pre><code>// Spaced list:
+&lt;ul <strong>class=&quot;lst-spcd&quot;</strong>&gt;
+&lt;li&gt;List item 1&lt;/li&gt;
+&lt;li&gt;List item 2&lt;/li&gt;
+&lt;li&gt;List item 3&lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+<h2> Definition lists − horizontal layout </h2>
+<dl class="dl-horizontal">
+	<dt>Term 1</dt>
+	<dd>Definition of term 1</dd>
+	<dt>Term 2</dt>
+	<dd>Definition of term 2</dd>
+</dl>
+<p> With no border</p>
+<dl class="dl-horizontal brdr-0">
+	<dt>Term 1</dt>
+	<dd>Definition of term 1</dd>
+	<dt>Term 2</dt>
+	<dd>Definition of term 2</dd>
+</dl>
+<h3>Code</h3>
+<pre><code>&lt;dl <strong>class=&quot;dl-horizontal&quot;</strong>&gt;
+&lt;dt&gt;...&lt;/dt&gt;
+&lt;dd&gt;...&lt;/dd&gt;
+&lt;/dl&gt;
+//With no border
+&lt;dl <strong>class=&quot;dl-horizontal brdr-0&quot;</strong>&gt;
+&lt;dt&gt;...&lt;/dt&gt;
+&lt;dd&gt;...&lt;/dd&gt;
+&lt;/dl&gt;</code></pre>
+
+<h2> List columns </h2>
+<ul>
+	<li><code>.colcount-xxs-2</code>, <code>.colcount-xs-2</code>, <code>.colcount-sm-2</code>, <code>.colcount-md-2</code>, <code>.colcount-lg-2</code>, <code>.colcount-xl-2</code></li>
+	<li><code>.colcount-xxs-3</code>, <code>.colcount-xs-3</code>, <code>.colcount-sm-3</code>, <code>.colcount-md-3</code>, <code>.colcount-lg-3</code>, <code>.colcount-xl-3</code></li>
+	<li><code>.colcount-xxs-4</code>, <code>.colcount-xs-4</code>, <code>.colcount-sm-4</code>, <code>.colcount-md-4</code>, <code>.colcount-lg-4</code>, <code>.colcount-xl-4</code></li>
+</ul>
+<h3> Appearance − Two columns</h3>
+<ul class="colcount-sm-2">
+	<li>Item 1</li>
+	<li>Item 2</li>
+	<li>Item 3</li>
+	<li>Item 4</li>
+	<li>Item 5</li>
+	<li>Item 6</li>
+	<li>Item 7</li>
+	<li>Item 8</li>
+</ul>
+<h4> code </h4>
+<pre><code>&lt;ul<strong> class=&quot;colcount-sm-2&quot;</strong>&gt;
+&lt;li&gt;Item 1&lt;/li&gt;
+...
+&lt;li&gt;Item 8&lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+<h3> Appearance − Three columns</h3>
+<ul class="colcount-sm-3">
+	<li>Item 1</li>
+	<li>Item 2</li>
+	<li>Item 3</li>
+	<li>Item 4</li>
+	<li>Item 5</li>
+	<li>Item 6</li>
+	<li>Item 7</li>
+	<li>Item 8</li>
+</ul>
+<h4> code </h4>
+<pre><code>&lt;ul <strong>class=&quot;colcount-sm-3&quot;</strong>&gt;
+&lt;li&gt;Item 1&lt;/li&gt;
+...
+&lt;li&gt;Item 8&lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+<h3> Appearance − Four columns</h3>
+<ul class="colcount-sm-4">
+	<li>Item 1</li>
+	<li>Item 2</li>
+	<li>Item 3</li>
+	<li>Item 4</li>
+	<li>Item 5</li>
+	<li>Item 6</li>
+	<li>Item 7</li>
+	<li>Item 8</li>
+</ul>
+<pre><code>&lt;ul <strong>class=&quot;colcount-sm-4&quot;</strong>&gt;
+&lt;li&gt;Item 1&lt;/li&gt;
+...
+&lt;li&gt;Item 8&lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+<h3> Appearance − Multi-class</h3>
+<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4">
+	<li>Item 1</li>
+	<li>Item 2</li>
+	<li>Item 3</li>
+	<li>Item 4</li>
+	<li>Item 5</li>
+	<li>Item 6</li>
+	<li>Item 7</li>
+	<li>Item 8</li>
+</ul>
+<pre><code>&lt;ul <strong>class=&quot;colcount-sm-2 colcount-md-3 colcount-lg-4&quot;</strong>&gt;
+&lt;li&gt;Item 1&lt;/li&gt;
+...
+&lt;li&gt;Item 8&lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+<h2>Responsive list <code>.list-responsive</code></h2>
+<ul class="wb-eqht list-unstyled mrgn-tp-md mrgn-bttm-sm lst-spcd-2 list-responsive wb-init wb-eqht-inited" id="wb-auto-5">
+	<li>Item</li>
+	<li>Item</li>
+	<li>Item</li>
+	<li>Item</li>
+	<li>Item</li>
+</ul>
+<h3>code</h3>
+<pre><code>&lt;ul class="<strong>list-responsive</strong>"&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
+
+<h2>List - Additional styles - GCWeb theme V5</h2>
+<h3>List double spaced <code>.lst-spcd-2</code></h3>
+<ul class="lst-spcd-2">
+	<li>Item</li>
+	<li>Item</li>
+	<li>Item</li>
+	<li>Item</li>
+	<li>Item</li>
+</ul>
+<h4>code</h4>
+<pre><code>&lt;ul class="lst-spcd-2"&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+<h3>Lists in columns <code>.list-col-[breakpoint]-[columns]</code></h3>
+<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>
+<h4>code</h4>
+<pre><code>&lt;ul class="<strong>list-col-xs-1 list-col-sm-2 list-col-md-3 list-col-lg-4</strong>"&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;li&gt;Item&lt;/li&gt;
+&lt;/ul&gt;
+</code></pre>
diff --git a/common/list/lists-fr.html b/common/list/lists-fr.html
new file mode 100644
index 000000000..d6d36e3d5
--- /dev/null
+++ b/common/list/lists-fr.html
@@ -0,0 +1,388 @@
+---
+{
+	"title": "Listes",
+	"language": "fr",
+	"altLangPage": "lists-en.html",
+	"breadcrumbs": [
+		{ "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" }
+	],
+	"dateModified": "2023-03-05"
+}
+---
+<div class="wb-prettify all-pre"></div>
+
+<p>Cette page nécessite une traduction.</p>
+<div lang="en">
+	<h2> Unordered lists</h2>
+	<ul>
+		<li>List item 1</li>
+		<li>List item 2</li>
+		<li>List item 3</li>
+	</ul>
+	<h3>Code</h3>
+	<pre><code><strong>&lt;ul&gt;</strong>
+		&lt;li&gt;...&lt;/li&gt;
+		&lt;/ul&gt;
+	</code></pre>
+
+	<h2>Ordered lists </h2>
+	<ol>
+		<li>List item 1</li>
+		<li>List item 2</li>
+		<li>List item 3</li>
+	</ol>
+	<h3>Code</h3>
+	<pre><code><strong>&lt;ol&gt;</strong>
+	&lt;li&gt;...&lt;/li&gt;
+	&lt;/ol&gt;</code></pre>
+
+	<h2>Definition lists </h2>
+	<dl>
+		<dt>Term 1</dt>
+		<dd>Definition of term 1</dd>
+		<dt>Term 2</dt>
+		<dd>Definition of term 2</dd>
+	</dl>
+	<pre><code>// Data list
+	&lt;dl&gt;
+
+	// Data term:
+	<strong>&lt;dt&gt;</strong>...&lt;/dt&gt;
+
+	// Data definition:
+	<strong>&lt;dd&gt;</strong>...&lt;/dd&gt;
+	&lt;/dl&gt;</code></pre>
+
+	<h2>Unstyled lists </h2>
+	<p>Unstyled list:</p>
+	<ul class="list-unstyled">
+		<li>List item 1</li>
+		<li>List item 2
+		<ul>
+			<li>List item 2a</li>
+			<li>List item 2b</li>
+		</ul>
+		</li>
+		<li>List item 3</li>
+	</ul>
+	<p>Unstyled nested list:</p>
+	<ul>
+		<li>List item 1</li>
+		<li>List item 2</lu>
+		<ul class="lst-none">
+			<li>List item 2a</li>
+			<li>List item 2b</li>
+		</ul>
+		</li>
+		<li>List item 3</li>
+	</ul>
+	<h3>Code</h3>
+	<pre><code>//Unstyled list:
+	&lt;ul <strong>class=&quot;list-unstyled&quot;</strong>&gt;
+		&lt;li&gt;...&lt;/li&gt;
+	&lt;/ul&gt;
+
+	//Unstyled nested list:
+	&lt;ul&gt;
+		&lt;li&gt;List item 1
+			&lt;ul <strong>class=&quot;lst-none&quot;</strong>&gt;
+				&lt;li&gt;List item 1a&lt;/li&gt;
+				&lt;li&gt;List item 1b&lt;/li&gt;
+			&lt;/ul&gt;
+		&lt;/li&gt;
+	&lt;/ul&gt;</code></pre>
+
+	<h2> Numbered lists </h2>
+	<ol>
+		<li>List item 1</li>
+		<li>
+			List item 2
+			<ol class="lst-num">
+				<li>List item 2a</li>
+				<li>List item 2b</li>
+			</ol>
+		</li>
+		<li>List item 3</li>
+	</ol>
+	<h3>Code</h3>
+	<pre><code>&lt;ol&gt;
+	&lt;li&gt;...
+		&lt;ol <strong>class=&quot;lst-num&quot;</strong>&gt;
+		&lt;li&gt;...&lt;/li&gt;
+		&lt;/ol&gt;
+	&lt;/li&gt;
+	&lt;li&gt;...&lt;/li&gt;
+	&lt;/ol&gt;</code></pre>
+
+	<h2>Alpha lists − Lower alpha </h2>
+	<ol>
+		<li>List item 1</li>
+		<li>
+			List item 2
+			<ol class="lst-lwr-alph">
+				<li>List item 2a</li>
+				<li>List item 2b</li>
+			</ol>
+		</li>
+		<li>List item 3</li>
+	</ol>
+	<h3>Code</h3>
+	<pre><code>&lt;ol&gt;
+	&lt;li&gt;...
+		&lt;ol <strong>class=&quot;lst-lwr-alph&quot;</strong>&gt;
+		&lt;li&gt;...&lt;/li&gt;
+		&lt;/ol&gt;
+	&lt;/li&gt;
+	&lt;li&gt;...&lt;/li&gt;
+	&lt;/ol&gt;</code></pre>
+
+	<h2> Alpha lists − Upper alpha</h2>
+	<ol class="lst-upr-alph">
+		<li>List item 1</li>
+		<li>
+			List item 2
+			<ol>
+				<li>List item 2a</li>
+				<li>List item 2b</li>
+			</ol>
+		</li>
+		<li>List item 3</li>
+	</ol>
+	<h3>Code</h3>
+	<pre><code>&lt;ol <strong>class=&quot;lst-upr-alph&quot;</strong>&gt;
+	&lt;li&gt;...&lt;/li&gt;
+	&lt;/ol&gt;</code></pre>
+
+	<h2>Roman numeral − Lower Roman </h2>
+	<ol>
+		<li>List item 1</li>
+		<li>
+			List item 2
+			<ol class="lst-lwr-rmn">
+				<li>List item 2a</li>
+				<li>List item 2b</li>
+			</ol>
+		</li>
+		<li>List item 3</li>
+	</ol>
+	<h3>Code</h3>
+	<pre><code>&lt;ol&gt;
+	&lt;li&gt;...
+		&lt;ol <strong>class=&quot;lst-lwr-rmn&quot;</strong>&gt;
+		&lt;li&gt;...&lt;/li&gt;
+		&lt;/ol&gt;
+	&lt;/li&gt;
+	&lt;li&gt;...&lt;/li&gt;
+	&lt;/ol&gt;</code></pre>
+
+	<h2> Roman numeral − Upper Roman </h2>
+	<ol class="lst-upr-rmn">
+		<li>List item 1</li>
+		<li>
+			List item 2
+			<ol>
+				<li>List item 2a</li>
+				<li>List item 2b</li>
+			</ol>
+		</li>
+		<li>List item 3</li>
+	</ol>
+	<h3>Code</h3>
+	<pre><code>&lt;ol<strong> class=&quot;lst-upr-rmn&quot;</strong>&gt;
+		&lt;li&gt;...&lt;/li&gt;
+	&lt;/ol&gt;</code></pre>
+
+	<h2> List inline </h2>
+	<ul class="list-inline">
+		<li>List item 1</li>
+		<li>List item 2</li>
+		<li>List item 3</li>
+	</ul>
+	<h3>Code</h3>
+	<pre><code>&lt;ol <strong>class=&quot;list-inline&quot;</strong>&gt;
+		&lt;li&gt;...&lt;/li&gt;
+	&lt;/ol&gt;</code></pre>
+
+	<h2> Spacing lists - spaces added</h2>
+	<ul class="lst-spcd">
+		<li>List item 1</li>
+		<li>List item 2</li>
+		<li>List item 3</li>
+	</ul>
+	<h3>Code</h3>
+	<pre><code>// Spaced list:
+	&lt;ul <strong>class=&quot;lst-spcd&quot;</strong>&gt;
+	&lt;li&gt;List item 1&lt;/li&gt;
+	&lt;li&gt;List item 2&lt;/li&gt;
+	&lt;li&gt;List item 3&lt;/li&gt;
+	&lt;/ul&gt;</code></pre>
+
+	<h2> Definition lists − horizontal layout </h2>
+	<dl class="dl-horizontal">
+		<dt>Term 1</dt>
+		<dd>Definition of term 1</dd>
+		<dt>Term 2</dt>
+		<dd>Definition of term 2</dd>
+	</dl>
+	<p> With no border</p>
+	<dl class="dl-horizontal brdr-0">
+		<dt>Term 1</dt>
+		<dd>Definition of term 1</dd>
+		<dt>Term 2</dt>
+		<dd>Definition of term 2</dd>
+	</dl>
+	<h3>Code</h3>
+	<pre><code>&lt;dl <strong>class=&quot;dl-horizontal&quot;</strong>&gt;
+	&lt;dt&gt;...&lt;/dt&gt;
+	&lt;dd&gt;...&lt;/dd&gt;
+	&lt;/dl&gt;
+	//With no border
+	&lt;dl <strong>class=&quot;dl-horizontal brdr-0&quot;</strong>&gt;
+	&lt;dt&gt;...&lt;/dt&gt;
+	&lt;dd&gt;...&lt;/dd&gt;
+	&lt;/dl&gt;</code></pre>
+
+	<h2> List columns </h2>
+	<ul>
+		<li><code>.colcount-xxs-2</code>, <code>.colcount-xs-2</code>, <code>.colcount-sm-2</code>, <code>.colcount-md-2</code>, <code>.colcount-lg-2</code>, <code>.colcount-xl-2</code></li>
+		<li><code>.colcount-xxs-3</code>, <code>.colcount-xs-3</code>, <code>.colcount-sm-3</code>, <code>.colcount-md-3</code>, <code>.colcount-lg-3</code>, <code>.colcount-xl-3</code></li>
+		<li><code>.colcount-xxs-4</code>, <code>.colcount-xs-4</code>, <code>.colcount-sm-4</code>, <code>.colcount-md-4</code>, <code>.colcount-lg-4</code>, <code>.colcount-xl-4</code></li>
+	</ul>
+	<h3> Appearance − Two columns</h3>
+	<ul class="colcount-sm-2">
+		<li>Item 1</li>
+		<li>Item 2</li>
+		<li>Item 3</li>
+		<li>Item 4</li>
+		<li>Item 5</li>
+		<li>Item 6</li>
+		<li>Item 7</li>
+		<li>Item 8</li>
+	</ul>
+	<h4> code </h4>
+	<pre><code>&lt;ul<strong> class=&quot;colcount-sm-2&quot;</strong>&gt;
+	&lt;li&gt;Item 1&lt;/li&gt;
+	...
+	&lt;li&gt;Item 8&lt;/li&gt;
+	&lt;/ul&gt;</code></pre>
+
+	<h3> Appearance − Three columns</h3>
+	<ul class="colcount-sm-3">
+		<li>Item 1</li>
+		<li>Item 2</li>
+		<li>Item 3</li>
+		<li>Item 4</li>
+		<li>Item 5</li>
+		<li>Item 6</li>
+		<li>Item 7</li>
+		<li>Item 8</li>
+	</ul>
+	<h4> code </h4>
+	<pre><code>&lt;ul <strong>class=&quot;colcount-sm-3&quot;</strong>&gt;
+	&lt;li&gt;Item 1&lt;/li&gt;
+	...
+	&lt;li&gt;Item 8&lt;/li&gt;
+	&lt;/ul&gt;</code></pre>
+
+	<h3> Appearance − Four columns</h3>
+	<ul class="colcount-sm-4">
+		<li>Item 1</li>
+		<li>Item 2</li>
+		<li>Item 3</li>
+		<li>Item 4</li>
+		<li>Item 5</li>
+		<li>Item 6</li>
+		<li>Item 7</li>
+		<li>Item 8</li>
+	</ul>
+	<pre><code>&lt;ul <strong>class=&quot;colcount-sm-4&quot;</strong>&gt;
+	&lt;li&gt;Item 1&lt;/li&gt;
+	...
+	&lt;li&gt;Item 8&lt;/li&gt;
+	&lt;/ul&gt;</code></pre>
+
+	<h3> Appearance − Multi-class</h3>
+	<ul class="colcount-sm-2 colcount-md-3 colcount-lg-4">
+		<li>Item 1</li>
+		<li>Item 2</li>
+		<li>Item 3</li>
+		<li>Item 4</li>
+		<li>Item 5</li>
+		<li>Item 6</li>
+		<li>Item 7</li>
+		<li>Item 8</li>
+	</ul>
+	<pre><code>&lt;ul <strong>class=&quot;colcount-sm-2 colcount-md-3 colcount-lg-4&quot;</strong>&gt;
+	&lt;li&gt;Item 1&lt;/li&gt;
+	...
+	&lt;li&gt;Item 8&lt;/li&gt;
+	&lt;/ul&gt;</code></pre>
+
+	<h2>Responsive list <code>.list-responsive</code></h2>
+	<ul class="wb-eqht list-unstyled mrgn-tp-md mrgn-bttm-sm lst-spcd-2 list-responsive wb-init wb-eqht-inited" id="wb-auto-5">
+		<li>Item</li>
+		<li>Item</li>
+		<li>Item</li>
+		<li>Item</li>
+		<li>Item</li>
+	</ul>
+	<h3>code</h3>
+	<pre><code>&lt;ul class="<strong>list-responsive</strong>"&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;/ul&gt;
+	</code></pre>
+
+	<h2>List - Additional styles - GCWeb theme V5</h2>
+	<h3>List double spaced <code>.lst-spcd-2</code></h3>
+	<ul class="lst-spcd-2">
+		<li>Item</li>
+		<li>Item</li>
+		<li>Item</li>
+		<li>Item</li>
+		<li>Item</li>
+	</ul>
+	<h4>code</h4>
+	<pre><code>&lt;ul class="lst-spcd-2"&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;/ul&gt;</code></pre>
+
+	<h3>Lists in columns <code>.list-col-[breakpoint]-[columns]</code></h3>
+	<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>
+	<h4>code</h4>
+	<pre><code>&lt;ul class="<strong>list-col-xs-1 list-col-sm-2 list-col-md-3 list-col-lg-4</strong>"&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;li&gt;Item&lt;/li&gt;
+	&lt;/ul&gt;
+	</code></pre>
+</div>