Easy Tutorial
❮ Foundation Alerts Foundation Grid Large ❯

Foundation Lists

In HTML, an unordered list (<ul>) example is as follows:

<ul>  <li>List item</li>  <li>List item</li>  <li>List item</li>
  <li>List item</li></ul>

Result:

Circle Bullets

In Foundation, the prefix symbol for an unordered list (<ul>) is a circle, using the .circle class, as shown below:

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

Square Bullets

Square bullet prefixes use the .square class:

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

No Bullets

If you do not need bullets, you can use the .no-bullet class:

<ul class="no-bullet">  <li>List item</li>  ...</ul>

If you need a horizontal list, you can add the .inline-list class to <ul>:

<ul class="inline-list">

List Menus

Some web pages may require list menus.

In HTML, list menus are defined using the unordered list <ul>, for example:

<ul>  <li><a href="#">Home</a></li>  <li><a 
href="#">Menu 1</a></li>  <li><a href="#">Menu 2</a></li>  
<li><a href="#">Menu 3</a></li></ul>

Result:

-Home -Menu 1 -Menu 2 -Menu 3

❮ Foundation Alerts Foundation Grid Large ❯