How to Add Bullet Points in Webflow: Step-by-Step

Lists make content scannable. Without them, your Webflow pages become walls of text that visitors skip.

Learning how to add bullet points in Webflow takes about five minutes, but the impact on readability lasts forever.

The Webflow Designer offers multiple methods for creating unordered and ordered lists. Some work inside Rich Text elements for blog posts. Others use the List element for more styling control.

This guide covers six approaches:

• Basic List element setup
• Text Block formatting
• Rich Text bullet lists
• Style Panel customization
• Custom bullet icons with code
• CMS collection list formatting

Pick the method that fits your project.

How to Add Bullet Points in Webflow

Adding bullet points in Webflow is the process of creating unordered and ordered lists using the Designer interface, Rich Text elements, or custom code.

Users need this when organizing blog content, breaking down features, or creating scannable landing pages.

This guide covers 6 methods requiring 5-10 minutes and basic Webflow Designer knowledge.

Prerequisites

Before you start, make sure you have:

• Webflow account (Free plan or higher)
• Access to Webflow Designer
• Basic familiarity with the Add Elements panel
• Published site for viewing custom CSS changes

Time estimate: 5-10 minutes per method.

Step One: How Do You Add a Basic List Element in Webflow?

The List element creates structured bullet points directly on your canvas with full styling control through the Style Panel.

Press the A key to open the Add Elements panel, navigate to Typography, then drag the List element onto your page.

Action

1. Add Elements panel (A key) > Typography > List
2. Choose list type: Unordered (bullets) or Ordered (numbers)
3. Click on the canvas to place your list container

Your list appears with placeholder items ready for editing.

Purpose

The List element gives you direct access to list item styling, spacing controls, and custom bullet formatting.

Unlike text-based lists, this method lets you add images, links, and nested elements inside each list item.

Step Two: How Do You Create Bullet Points Inside a Text Block?

Text Block formatting converts regular paragraphs into bullet lists using the floating toolbar, ideal for quick content formatting without adding new elements.

Select your text, click the Bullet List icon in the toolbar, and your content transforms into a formatted list.

Action

1. Add Elements panel > Typography > Text Block
2. Type your list items on separate lines
3. Highlight all text you want formatted
4. Click the Bullet List icon in the floating toolbar

The text block now displays as a proper unordered list.

Purpose

This method works best for simple content lists where you need basic bullet formatting without complex styling requirements.

Perfect for body copy, feature lists, and quick content blocks.

Step Three: How Do You Add Bullet Points in Rich Text Elements?

The Rich Text element handles long-form content like blog posts and includes built-in list formatting through its dedicated toolbar.

This element connects to Webflow CMS collections, making it the go-to choice for dynamic content.

Action

1. Add Elements panel (A key) > Typography > Rich Text
2. Click inside the Rich Text block to activate editing
3. Type your content or paste from external sources
4. Select text and click the Unordered List button

Your formatted list appears inside the Rich Text container.

Purpose

Rich Text elements maintain consistent typography across your site while allowing inline formatting changes.

The CMS connection means editors can add bullet lists directly in the Webflow Editor without Designer access.

Step Four: How Do You Style Bullet Points Using the Style Panel?

The Style Panel controls typography settings, spacing, and list marker appearance for any list element on your canvas.

Select your list, press S to open styling options, and adjust properties to match your brand.

Action

1. Style Panel (S key) > Typography section
2. Create a class name (e.g., “bullet-list-custom”)
3. Adjust margin-left: 20px, padding-left: 10px
4. Set font size, color, and line height

Your styled bullets now follow consistent responsive typography rules across breakpoints.

Purpose

Classes let you reuse bullet styles site-wide without manually formatting each list.

Change the class once and every connected list updates automatically.

Step Five: How Do You Add Custom Bullet Icons with CSS?

Custom code replaces default bullet markers with SVG icons or images, giving you complete control over list appearance.

Upload your icon to the Assets panel, grab the URL, then paste CSS into Page Settings.

Action

1. Assets panel > Upload your SVG or PNG icon
2. Copy the asset URL (hover > click link icon)
3. Page Settings > Inside tag field
4. Paste this code:

“ <style> ul { list-style-type: none; padding-left: 0; } li { background-image: url("YOUR-ASSET-URL"); background-repeat: no-repeat; background-size: 1rem; background-position: 0 0.25rem; padding-left: 1.5rem; } </style> `

Replace YOUR-ASSET-URL with your copied link.

Purpose

Custom bullets create visual hierarchy and brand consistency that default markers cannot achieve.

Checkmarks for feature lists, arrows for steps, custom icons for categories.

Step Six: How Do You Format Lists in CMS Rich Text Fields?

CMS-connected Rich Text fields allow content editors to create bullet lists directly in the Webflow Editor without Designer access.

The formatting toolbar appears when editing any Rich Text field in your collection.

Action

1. Open your CMS Collection > Select item to edit
2. Click inside the Rich Text field
3. Type content on separate lines
4. Highlight text > Click the list button in toolbar

Published pages display your formatted bullet list with inherited styles.

Purpose

Content teams update dynamic content independently while maintaining design consistency across all collection pages.

Verification

Confirm your bullet points render correctly before publishing:

• Designer preview: Check list displays on canvas
• Published site: Verify custom CSS styles appear
• Multiple browsers: Test cross-browser compatibility
• Mobile view: Confirm responsive design at all breakpoints

Custom CSS only shows on published sites, not in the Designer preview.

Troubleshooting

Issue: Bullets Not Appearing in CMS Rich Text

Solution: Check that Rich Text element has “All Nested Elements” styled in Designer.

Select Rich Text > Click into element > Style the “All Lists” nested selector.

Issue: Custom CSS Bullets Not Displaying

Solution: Verify asset URL is correct and includes https:// prefix.

Confirm code is in Page Settings (not site-wide custom code) if testing on single page.

Issue: List Indentation Incorrect

Solution: Adjust padding-left value in Style Panel, typical range 16px-40px.

Remove default browser margins with margin-left: 0 in custom code.

Issue: Nested Lists Not Working

Solution: Use Shift + Enter for basic indentation in Rich Text editor.

For true nested lists, use HTML embed with proper ul/li nesting structure.

Related Processes

• How to add fonts to Webflow
• How to center an image in Webflow
• How to use Webflow templates
• How to create a form in Webflow

FAQ on How To Add Bullet Points In Webflow

How do I add a bullet list in Webflow Designer?

Press A to open the Add Elements panel, navigate to Typography, and drag the List element onto your canvas. Choose between unordered (bullets) or ordered (numbers) list types. Each list item appears ready for text editing.

Can I create bullet points inside a Text Block?

Yes. Type your content on separate lines, highlight all text, then click the Bullet List icon in the floating toolbar. The Text Block converts your paragraphs into a formatted unordered list automatically.

How do I add bullets in Rich Text elements?

Click inside the Rich Text element, type or paste your content, select the text, and click the list button in the toolbar. This method works for both static pages and CMS-connected dynamic content.

Why are my custom CSS bullets not showing?

Custom code only renders on published sites, not in Designer preview. Verify your asset URL includes the https:// prefix and check that your code sits in the correct Page Settings field under Inside <head> tag.

Can I use custom icons as bullet points?

Upload an SVG in HTML format or PNG to your Assets panel. Copy the URL and use CSS background-image property to replace default markers. Set background-size to control icon dimensions.

How do I style bullet points in Webflow?

Select your list element, open the Style Panel (S key), and create a class. Adjust typography settings, padding-left for indentation, and margin values. Your styles apply to all lists sharing that class name.

Do bullet lists work in Webflow CMS?

Rich Text fields in CMS collections support bullet formatting. Content editors access the list button directly in the Webflow Editor. Styled Rich Text elements on your template page control how CMS bullets display.

How do I create nested lists in Webflow?

Press Shift + Enter at the end of a list item for basic indentation. For proper nested structures with sub-bullets, use an Embed element with standard ul and li tags written in your markup.

Can I change bullet color separately from text?

Default bullets inherit text color. For independent control, use CSS with the ::marker pseudo-element or replace bullets entirely with background images. Custom icons give you complete color and style flexibility.

How do I remove default bullet styling?

Add custom code with list-style-type: none to remove markers. Set padding-left: 0 and margin-left: 0 to eliminate default spacing. This creates a clean base for custom bullet designs or icon replacements.

Conclusion

You now know how to add bullet points in Webflow using six different methods. Each approach serves a specific purpose depending on your content structure and styling needs.

The List element gives you full control through the Style Panel. Text Blocks handle quick formatting. Rich Text works best for blog content and CMS collections.

Custom icons take your bullet styling further. Upload assets, add a few lines of code to Page Settings, and your lists stand out from default markers.

Start with the basic methods. Master list indentation and typography settings first.

Then experiment with custom bullet icons and advanced text formatting options. Your Webflow pages will look cleaner and scan easier.