How Do You Do Sub Bullets in Webflow?

by

In this tutorial, we will explore how to create sub bullets in Webflow. Sub bullets are a great way to organize information and make it more visually appealing for your readers. By using nested lists, you can create a hierarchy of information that is easy to understand and navigate.

To start off, let’s take a look at the basic structure of an unordered list in HTML. We can use the

    tag to define the start of our list, and each list item will be enclosed within

  • tags. Here’s an example:

    HTML Structure:
    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    </ul>

    This will create a simple unordered list with three items. Now, let’s move on to creating sub bullets within this list.

    Creating Sub Bullets:
    To create sub bullets, we need to nest another unordered list within one of the list items. This nested list will function as a sub-list or sub-bullets. Let’s take a look at an example:

    <ul>
    <li>List item 1
    <ul>
    <li>Sub bullet 1</li>
    <li>Sub bullet 2</li>
    <li>Sub bullet 3</li>
    </ul>
    </li>
    <li>List item 2</li>
    <li>List item 3</li>
    </ul>

    In this example, we have created a sub-list within the first list item. This will appear as sub bullets when rendered on a webpage. You can repeat this process to create as many levels of sub bullets as needed.

    Styling Sub Bullets:
    By default, Webflow will provide some basic styling for lists. However, you can customize the appearance of your sub bullets using CSS. Here’s an example of how you can style your sub bullets:

    <style>
    ul {
    list-style-type: disc; /* Change the bullet style */
    margin-left: 20px; /* Adjust the indentation */
    padding-left: 20px; /* Adjust the indentation */
    }

    ul ul {
    list-style-type: circle; /* Change the sub bullet style */
    margin-left: 40px; /* Adjust the indentation */
    padding-left: 40px; /* Adjust the indentation */
    }
    </style>

    In this example, we are using CSS to change the bullet and sub bullet styles, as well as adjust the indentation. You can experiment with different styles and values to achieve your desired look.

    Conclusion:
    Sub bullets in Webflow can be easily created by nesting unordered lists within list items. This allows you to organize information in a hierarchical manner and make it more visually appealing. By customizing the styling using CSS, you can further enhance the presentation of your sub bullets.

    Remember to use proper HTML elements like

      and

    • for lists, and utilize styling elements like for bold text and for underline if necessary. Organizing your content with proper headers (

      ,

      , etc.) will also help readers navigate through your article effortlessly.

      With these techniques in mind, you are now equipped to create engaging and organized sub bullet lists in Webflow. Happy coding!