Language selection

Government of Canada / Gouvernement du Canada

Search

Custom list styling using parent div element

To accommodate managed web service product requirements regarding the lists, CSS classes must be applied to the parent element.

Unstyled lists

Custom markup

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

Unstyled nested list:

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

Code

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

Default markup - Recommended

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

Unstyled nested list:

  • List item 1
    • List item 2a
    • List item 2b
  • List item 2
  • 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>

Alpha lists − Lower alpha

Custom markup

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

Code

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

Default markup - Recommended

  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

Custom markup

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

Code

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

Default markup - Recommended

  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>...
		<ol>
			<li>...</li>
		</ol>
	</li>
	<li>...</li>
</ol>

Roman numeral − Lower Roman

Custom markup

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

Code

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

Default markup - Recommended

  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

Custom markup

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

Code

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

Default markup - Recommended

  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>
	<li>
		<ol>
			<li>...</li>
		</ol>
	</li>
	<li>...</li>
</ol>

List inline

Custom markup

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

Code

<div class="list-inline">
	<ul>
		<li>...</li>
		<li>...</li>
		<li>...</li>
	</ul>
</div>

Default markup - Recommended

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

Code

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

Spacing lists - spaces added

Custom markup

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

Code

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

Default markup - Recommended

  • List item 1
  • List item 2
  • List item 3
  1. List item 1
  2. List item 2
  3. 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>
<ol class="lst-spcd">
	<li>List item 1</li>
	<li>List item 2</li>
	<li>List item 3</li>
</ol>

List double spaced .lst-spcd-2

Custom markup

  • Item
  • Item
  • Item
  • Item
  • Item
  1. Item
  2. Item
  3. Item
  4. Item
  5. Item

Code

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

Default markup - Recommended

  • Item
  • Item
  • Item
  • Item
  • Item
  1. Item
  2. Item
  3. Item
  4. Item
  5. Item

Code

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

Custom bullet style for unordered list

Disc styled by its parent container

  • Level 1- List item 1
    • Level 2 - List item 1
      • Level 3 - List item 1
      • Level 3 - List item 2
      • Level 3 - List item 3
    • Level 2 - List item 2
    • Level 2 - List item 3
  • Level 1 - List item 2
  • Level 1 - List item 3

Code

<ul class="lst-none">
	<li>...
		<div class="list-advanced disc">
			<ul>
				<li>...
					<ul>
						<li>...</li>
						<li>...</li>
						<li>...</li>
					</ul>
				</li>
				<li>...</li>
				<li>...</li>
			</ul>
		<div>
	</li>
</ul>

Disc - Recommended

  • Level 1- List item 1
    • Level 2 - List item 1
      • Level 3 - List item 1
      • Level 3 - List item 2
      • Level 3 - List item 3
    • Level 2 - List item 2
    • Level 2 - List item 3
  • Level 1 - List item 2
  • Level 1 - List item 3

Code

<ul class="lst-none">
	<li>...
		<ul class="disc">
			<li>...
				<ul>
					<li>...</li>
					<li>...</li>
					<li>...</li>
				</ul>
			</li>
			<li>...</li>
			<li>...</li>
		</ul>
	</li>
	<li>...</li>
	<li>...</li>
	</li>
</ul>

Circle styled by its parent container

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

Code

<div class="list-advanced circle">
	<ul>
		<li>...</li>
		<li>...</li>
		<li>...</li>
	</ul>
<div>

Circle - Recommended

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

Code

<ul class="circle">
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

Square styled by its parent container

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

Code

<div class="list-advanced square">
	<ul>
		<li>...</li>
		<li>...</li>
		<li>...</li>
	</ul>
<div>

Square - Recommended

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

Code

<ul class="square">
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

Page details

Date modified: