How do I add a bulleted list in Webflow?

Drag a List from the Add panel

Open the Add panel, or press A, and drag a List onto the canvas. The element arrives as a main list and three list items. It is unordered by default, so each item shows a bullet on the left.

The items start empty. That is expected. A list item can hold a heading, a paragraph, an image, a video, or another list, so Webflow does not preset a sentence inside it.

This is not a Collection list. A Collection list repeats CMS items. A List element is the bulleted or numbered block you write yourself. A bulleted list inside a rich text field is also different: that one is typed inside the rich text element. The rich text guide is the CMS field. This page is the List element.

Example: a services page needs three promises under the intro, not a blog. Drag a List under the paragraph. Do not drag a Collection list and then try to type the promises into it.

Choose bullets, numbers, or no marker

The main list is unordered until you change it. An ordered list shows numbers. You can switch in two ways. Select the main list element and press Enter. Or select it, open the Settings panel, and change the type under List settings.

List settings also includes no bullets. That removes the bullets or the numbers. The items stay. Use it when the design replaces the marker with something you draw, and you still want the list structure.

Example: the three promises stay bulleted. A 'how to arrive' block under them should be 1, 2, 3. Select that second list, not its first item, open List settings, and set the type to ordered. Pressing Enter on the main list is the other switch. If only one row changed, you had an item selected, not the list.

Type in the item, or drop something in

Double-click a list item and type. You can also select the item and press Enter or Return to edit the text. If the item should hold more than a sentence, drag a paragraph, a heading, or an image into that item.

Keep the sentence in the item. A paragraph typed beside the list is not a bullet. The marker belongs to the item.

Example: the first item reads 'Email us before Friday.' The second reads 'Include the guest count.' The third reads 'We reply in writing.' Each line is its own item. The heading above the list stays a heading. The heading guide is that level. Do not make the heading a fourth bullet to make it look smaller.

Add an item, or nest a second list

To add an item, select one you have, then copy and paste it. Or right-click the item and choose Duplicate. The new item is another row in the same list. Remove an empty item you do not need so the three default rows match the sentences you have.

You can nest a list inside a list item. Drag another List onto the canvas, then place that child list inside a list item of the parent. Also place a text element in that same parent item, above the child list. Build this structure before you type into the parent item. A nested list cannot be placed inside a parent item after that item has been edited. If you already typed there, add an element inside the item first, then nest the child list inside that element.

Do not drop the child list on the main list element and expect a nest. The child belongs in an item.

Example: the third promise needs two details. Duplicate nothing yet. Put a short line in a text element inside the third item, and put a child list under that line with two items, 'Lunch' and 'Dinner'. If the third item already contains only typed text and the child list will not go in, add a Box inside the item and put the child list in the Box.

Style the markers and the rows apart

Select the main list, open the Selector, and style a class, or style the tag. All Unordered lists sets the default for bulleted lists. All ordered lists sets the default for numbered lists. Left padding on the list moves the space where the bullets or numbers sit. More padding pushes the marker in. Less padding pulls it toward the edge.

Select a list item to space the rows. A bottom margin separates one item from the next. A left margin separates the words from the marker. The margin guide is that spacing. Put the same class on each item in this list if they should match.

All list items is the tag for every item on the site, in both ordered and unordered lists. Select an item, open the Selector, and choose All list items only when both kinds of list should share that spacing. A bottom margin there will also open up the numbered steps.

Example: this services list uses a class on its items with a small bottom margin, and the list's left padding keeps the bullets aligned with the paragraph above. The numbered arrival list keeps its own class, so it does not inherit that margin.

Publish and read the page. Bullets should show unless List settings is on no bullets, or the padding has pulled them out of sight. Numbers should show only on the list whose type is ordered. If every list on the site moved, you styled a tag. Move the exception onto a class and publish again.

A list on a page you already have is ordinary content work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.