Bulma Content Ordered Lists Alternatives

Last Updated : 20 Jan, 2022

Bulma Content Ordered list alternative is used to specify the order type for displaying. It works as an HTML ol type attribute.

This defines which type (1, A, a, I, and i) of the order you want in your list numeric, alphabetic, or roman numbers.

Bulma Content Ordered list alternative class:

is-lower-alpha: It defines the list items in alphabetically ordered lowercase letters. (a,b,c,…)
is-lower-roman: It defines the list items in lowercase roman number order. (i, ii, iii,…)
is-upper-alpha: It defines the list items in alphabetically ordered uppercase letters. (A, B, C,…)
is-upper-roman: It defines the list items in uppercase roman number order. (I, II, III,…)

Syntax:

<ol class="Content Ordered list alternative Class">
    <li></li>
    <li></li>
    ....
    <li></li>
</ol>

Note: The default order list is a numeric order list.

Example: In this example, we will see all the alternatives in an ordered list like lowercase, uppercase, roman, and alphabetic.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-2 has-text-success" > 
        GeeksforGeeks 
    </h1> 
    <b>Bulma Content Ordered list alternative</b> 
        <div class="container"> 
            <div class="columns has-text-left ml-6"> 
                <div class="column content">  
                    <ol class="is-lower-alpha"> 
                          <li>HTML</li> 
                          <li>CSS</li> 
                          <li>JS</li> 
                        </ol> 
                </div> 
                <div class="column content">  
                    <ol class="is-lower-roman"> 
                          <li>HTML</li> 
                          <li>CSS</li> 
                          <li>JS</li> 
                        </ol> 
                </div> 
                <div class="column content">  
                    <ol class="is-upper-alpha"> 
                          <li>HTML</li> 
                          <li>CSS</li> 
                          <li>JS</li> 
                        </ol> 
                </div> 
                <div class="column content">  
                    <ol class="is-upper-roman"> 
                          <li>HTML</li> 
                          <li>CSS</li> 
                          <li>JS</li> 
                        </ol> 
                </div> 
            </div> 
        </div> 
</body> 
</html>