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 tagClassDescription
<ul>No extra classDefault style. List marked with dots.
 .list-circleList marked with a hollow circle.
 .list-squareList marked with square shape.
<ol>No extra classDefault style. List marked in numeric order.
 .list-lower-alphaList numbered with the lowercase alphabet.
 .list-upper-alphaList numbered with the uppercase alphabet.
 .list-lower-romanList numbered with lowercase Roman alphabet.
 .list-upper-romanList numbered with uppercase Roman alphabet.

Other list options

Turning off indentation

ExplanationOutputCode 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 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>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
    

Turning off bullets

ExplanationOutputCode structure

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>
                </ul>
            </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>
                </ul>
            </li>
            <li>List item 3</li>
         </ul>
    

Formatting links as a list

ExplanationOutputCode 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 list-link can be used to display a list of links with a raquo » at the end.


        <ul class="list-link">
            <li><a href="#">List item 1</a></li>
            <li><a href="#">List item 2</a></li>
            <li><a href="#">List item 3</a></li>
        </ul>
    

Creating a hanging indent

ExplanationOutputCode 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 <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>
                                            
  1. List item 1
  2. List item 2
  3. 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>
                                            
  1. List item 1
  2. List item 2
  3. 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>
                                            
  1. List item 1
  2. List item 2
  3. 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>
                                            
  1. List item 1
  2. List item 2
  3. 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>
                                            
  1. List item 1
  2. List item 2
  3. 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 tagClassDescription
<ul>No extra classList marked with dots.
 .list-circleList marked with hollow circle.
 .list-squareList marked with square shape.
<ol>No extra classList marked with number.
 .list-lower-alphaList numbered with lowercase alphabet.
 .list-upper-alphaList numbered with uppercase alphabet.
 .list-lower-romanList numbered with lowercase Roman alphabet.
 .list-upper-romanList 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>
                            
  1. List item 1
  2. List item 2
  3. 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>
                            
  1. List item 1
  2. List item 2
  3. 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>
                            
  1. List item 1
  2. List item 2
  3. 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>
                            
  1. List item 1
  2. List item 2
  3. 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>
                            
  1. List item 1
  2. List item 2
  3. List item 3