Foundation Lists

In HTML, unordered lists (<ul>) Example as follows:

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

Result:

  • List item
  • List item
  • List item
  • List item

Circle Bullets

In Foundation, unordered list (<ul>) The prefix symbol is a circle, using the .circle class, example:

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

Try it Yourself »

Square Bullets

Square marker prefix uses the .square class:

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

Try it Yourself »

No Bullets

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

<ul class="no-bullet">
  <li>List item</li>
  ...
</ul>
Try it Yourself »

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

<ul class="inline-list">

Try it Yourself »

List Menu

Some Web pages may require list menus.

In HTML, list menus are the same as unordered lists<ul>To define, 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:

other extensions