Lists
There are two main types of lists:
<ul>: unordered list- the list items are marked with bullets;<ol>: ordered list- the list items are listed in numeric/alphabetic order.
By default, the style for unordered lists started with round dots and ordered lists started with Arabic numbers.
Available classes
We provide different styles for both ordered and unordered lists, simply add the class name to <ul> or <ol> tag. Please refer to the Use cases for how they look like.
| Parent tag | Class | Description |
|---|---|---|
<ul> | No extra class | Default style. List marked with dots. |
.list-circle | List marked with a hollow circle. | |
.list-square | List marked with square shape. | |
<ol> | No extra class | Default style. List marked in numeric order. |
.list-lower-alpha | List numbered with the lowercase alphabet. | |
.list-upper-alpha | List numbered with the uppercase alphabet. | |
.list-lower-roman | List numbered with lowercase Roman alphabet. | |
.list-upper-roman | List numbered with uppercase Roman alphabet. |
Other list options
Turning off indentation
| Explanation | Output | Code structure |
|---|---|---|
In some cases, like small or narrow boxes, you may want to use a list, but not have it indented. To achieve this, use the class Note: This class is not recommended for lists with 100 or more items, as the point number will be truncated in some browsers. |
| |
Turning off bullets
| Explanation | Output | Code structure |
|---|---|---|
In some cases you may want to use a list, but not have bullets. To achieve this, use the class Note: that if you want nested lists to have no bullets, you must also apply If you do not want the list to be indented from the margin, use the |
| |
With 'noindent' also applied: |
| |
Formatting links as a list
| Explanation | Output | Code structure |
|---|---|---|
Long lists of links can be overwhelming if all the links are underlined. If the primary purpose of the list is navigation, the class | |
Creating a hanging indent
| Explanation | Output | Code structure |
|---|---|---|
Lists can be used to create a hanging indent – usually used for bibliographies. On the hanging indent style, the bullet points are removed. The class will only work on bulleted |
| |
Use cases
Bulleted list
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
- List item 1
- List item 2
- List item 3
Bulleted list - circle
<ul class="list-circle">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
- List item 1
- List item 2
- List item 3
Bulleted list - square
<ul class="list-square">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
- List item 1
- List item 2
- List item 3
Numeral list
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
- List item 1
- List item 2
- List item 3
Alphabetic list - lowercase
<ol class="list-lower-alpha">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
- List item 1
- List item 2
- List item 3
Alphabetic list - uppercase
<ol class="list-upper-alpha">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
- List item 1
- List item 2
- List item 3
Roman numeral list - lowercase
<ol class="list-lower-roman">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
- List item 1
- List item 2
- List item 3
Roman numeral list - uppercase
<ol class="list-upper-roman">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
- List item 1
- List item 2
- List item 3
There are two main types of lists:
- the list items are marked with bullets;
- the list items are marked with numbers or letters.
By default, the style for unordered list started with round dots, and ordered list stared with Arabic numbers.
Available classes
We provide different styles for both ordered and unordered lists, simply add the class name to <ul> or <ol>. Please refer to the Use cases for how they look like.
| Parent tag | Class | Description |
|---|---|---|
<ul> | No extra class | List marked with dots. |
.list-circle | List marked with hollow circle. | |
.list-square | List marked with square shape. | |
<ol> | No extra class | List marked with number. |
.list-lower-alpha | List numbered with lowercase alphabet. | |
.list-upper-alpha | List numbered with uppercase alphabet. | |
.list-lower-roman | List numbered with lowercase Roman alphabet. | |
.list-upper-roman | List numbered with uppercase Roman alphabet. |
Other list options
Turning off indentation
In some cases, like small or narrow boxes, you may want to use a list, but not have it indented. To acheive this, use the class noindent.
Note: This class is not recommended for lists with 100 or more items, as the point number will be truncated in some browsers.
- List item 1
- List item 2
- List item 3
<ul class="noindent">
<li>item in list</li>
</ul>
Turning off bullets
In some cases you may want to use a list, but not have bullets. To achieve this, use the class nobullet.
Note that if you want nested lists to have no bullets, you must also apply nobullet to the nested <ul> tags.
If you do not want the list to be indented from the margin, use the noindent class as well.
- List item 1
- List item 2
- blah
- blah
- blah
- List item 3
<ul class="nobullet">
<li>List item 1</li>
<li>List item 2
<ul class="nobullet">
<li>blah</li>
<li>blah</li>
<li>blah</li>
</ui></li>
<li>List item 3</li>
</ul>
With 'noindent' also applied:
- List item 1
- List item 2
- blah
- blah
- blah
- List item 3
<ul class="nobullet noindent">
<li>List item 1</li>
<li>List item 2
<ul>
<li>blah</li>
<li>blah</li>
<li>blah</li>
</ui></li>
<li>List item 3</li>
</ul>
Formatting links as a list
Long lists of links can be overwhelming if all the links are underlined. If it is obvious that the primary purpose of the list is navigation, the class linklist can be used to display a list of links without the underline.
Link lists align with the left margin and are not indented. The class will only work on bulleted lists.
<ul class="linklist">
<li><a href="#">item in list</a></li>
</ul>
Creating a hanging indent
Lists can be used to create a hanging indent – usually used for bibliographies. On the hanging indent style, the bullet points are removed.
The class will only work on bulleted <ul> lists.
- Anstey, K.J., Bielak, A.M.M., Birrell, C.L., Browning, C.J., Burns, R.A., Byles, J., et al. (accepted 2011/02/07). Understanding ageing in older Australians: The contribution of the DYNOPTA project to the evidence base and policy. Australasian Journal on Ageing.
<ul class="hangindent small">
<li>Anstey, K.J., Bielak, A.M.M., Birrell, C.L.,
Browning, C.J., Burns, R.A., Byles, J., et al.
(accepted 2011/02/07). Understanding ageing
in older Australians: The contribution of the
DYNOPTA project to the evidence base and
policy. <em>Australasian Journal on
Ageing</em>.
</li>
</ul>
Use cases
Bulleted list
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
- List item 1
- List item 2
- List item 3
Bulleted list - circle
<ul class="list-circle">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
- List item 1
- List item 2
- List item 3
Bulleted list - square
<ul class="list-square">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
- List item 1
- List item 2
- List item 3
Numeral list
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
- List item 1
- List item 2
- List item 3
Alphabetic list - lowercase
<ol class="list-lower-alpha">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
- List item 1
- List item 2
- List item 3
Alphabetic list - uppercase
<ol class="list-upper-alpha">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
- List item 1
- List item 2
- List item 3
Roman numeral list - lowercase
<ol class="list-lower-roman">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
- List item 1
- List item 2
- List item 3
Roman numeral list - uppercase
<ol class="list-upper-roman">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
- List item 1
- List item 2
- List item 3