Webflow sync, pageviews & more.
NEW

Can I adjust the indent of a bullet list in a rich text element in Webflow?

TL;DR
  • Assign a custom class to the Rich Text element.
  • Add custom CSS targeting that class to adjust indentation (e.g., using padding or margin).
  • Publish the site to see the changes, as they won't appear in the Designer.

You can adjust the indent of a bullet list in a Rich Text element in Webflow, but it requires using custom CSS, since the Webflow Designer doesn’t offer direct controls for list indentation in Rich Text.

1. Add a Custom Class to the Rich Text Element

  • Select the Rich Text element on the canvas.
  • Assign it a unique class (e.g., custom-richtext) so you can target it with custom CSS.

2. Add Custom CSS via Embed or Page Settings

  • Use a Custom Code Embed component or go to your Page Settings → Inside <head> section.

  • Insert custom CSS to control indentation. Example:

  • To adjust left padding (indent), use:
    custom-richtext ul { padding-left: 1.5rem; }

  • To change individual list items:
    custom-richtext li { margin-left: 0.5rem; }

  • You can customize values to your desired indent (e.g., use em, px, or rem units).

3. Publish to See the Changes

  • Changes won't be visible in the Webflow Designer, only on the published site.
  • Make sure to publish your site to preview the updated indent styles.

Summary

You can change the indent of bullet lists inside a Rich Text element by assigning a class and adding custom CSS targeting that class. This must be done via code, as the Designer doesn’t offer direct controls for list indentation.

Rate this answer

Other Webflow Questions