Open In App

Foundation CSS Typography Helpers Un-bulleted List

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

Foundation CSS helper classes allow us to scaffold certain typographic styles faster. Foundation CSS has multiple typography helpers such as Text Alignment, Subheader, Lead Paragraph, Unbulleted List, and Typescale. In this article, we will learn about the Un-bulleted List Typographic helper.

The Foundation CSS Un-bulleted List Typographic Helper is used to remove the bullets and numbers from unordered and ordered lists respectively. To convert an unordered or ordered list into Un-bulleted List in Foundation CSS, we use the no-bullet class. This class can be applied to both<ul> and <ol> tags.

Foundation CSS Un-bulleted List Typographic Helper Class:

  • no-bullet: This class removes the bullets and numbers from unordered and ordered lists respectively.

Syntax:

<ol class="no-bullet"></ol>
<ul class="no-bullet"></ul>

Example: The following example demonstrates the Un-bulleted List typographic helper class in the unordered list.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body style="padding: 30px; max-width: 600px;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <strong>
        Foundation CSS Un-bulleted
        List Typographic Helper
    </strong>
    <br/><br/>
    <div style="float: left;">
    <strong>Unordered list with bullets:</strong>
    <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ul>
    </div>
    <div style="float: right;">
    <strong>Unordered list without bullets:</strong>
    <ul class="no-bullet">
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ul>
    </div>
</body>
  
</html>


Output:

class="aligncenter"

Example 2: The following example demonstrates the Un-bulleted List typographic helper class in the ordered list.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    
    <!-- Compressed CSS -->
    <link rel="stylesheet" 
          href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body style="padding: 30px; max-width: 600px;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <strong>
          Foundation CSS Un-bulleted 
        List Typographic Helper</strong>
    <br/><br/>
    <div style="float: left;">
    <strong>Ordered list with bullets:</strong>
    <ol>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ol>
    </div>
    <div style="float: right;">
    <strong>Ordered list without bullets :</strong>
    <ol class="no-bullet">
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
    </ol>
    </div>
</body>
  
</html>


Output:

class="aligncenter"

Reference: https://get.foundation/sites/docs/typography-helpers.html#un-bulleted-list



Last Updated : 24 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads