Life Adventure

Unordered list by default

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
<ul>
  <li>...</li>
</ul>

Unordered lists with bullets

You can use 15 differents bullets before your list items :

  • check
  • check-square-o
  • chevron
  • chevron-circle
  • angle
  • angle-double
  • circle
  • circle-o
  • star
  • star-o
  • thumbs-o-up
  • hand-o
  • arrow-circle
  • caret-simple
  • share
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit


<ul class="check-square-o">
<li>...</li>
</ul>

<ul class="star-o">
<li>...</li>
</ul>

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

Unordered lists with color bullets

You can use 10 differents colors for each bullet :

  • red
  • blue
  • green
  • purple
  • yellow
  • black
  • white
  • grey
  • turquoise
  • pink
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit


<ul class="star green">
<li>...</li>
</ul>

<ul class="star red">
<li>...</li>
</ul>

<ul class="star blue">
<li>...</li>
</ul>

Unordered lists without bullet

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit


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

Ordered list by default

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
  4. Faucibus porta lacus fringilla vel
  5. Aenean sit amet erat nunc
<ol>
  <li>...</li>
</ol>

Additionnal ordered lists

  1. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.
  2. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
  3. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem.


  1. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.
  2. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
  3. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem.


  1. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.
  2. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
  3. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem.


<ol class="simple">
<li>...</li>
</ol>


<ol class="labels"> <li>...</li> </ol>
<ol class="circle"> <li>...</li> </ol>

Change the numerotation of your ordered list

You can use the class .upper-roman, .lower-roman, .upper-latin or .lower-latin to change the numerotation

  1. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.
  2. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
  3. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem.
  4. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.
  5. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
  6. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem.
  7. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.


<ol class="simple upper-roman">
<li>...</li>
</ol>

Back to top