Bullet Points Indent

Need help Plugins
1

Hey, I am trying to create a text with a bullet point list.

image
image435×357 13.8 KB

This is a word example of how it should look roughly. I tried using Rich Text editor but it is a nightmare and i cant use tab to indent it. Is there any good plugin or tool to make bullet points lists that look nice?
This should be a fixed text and not something the user inputs.
Also I tried Rich Text editor Indent but that is grey and I cant press it…

Thanks for any help :slight_smile:

2

Hello there,

If you’re using Bubble’s official Rich Text Editor and struggling with indents and bullet styles, there’s a workaround to customize the bullet point list structure beautifully.

You can add an HTML element to your page where the Rich Text Editor is located and insert the following code. This allows you to control the indentation, bullet styles, and overall appearance of your fixed text.

Be sure to assign an Element ID to your Rich Text Editor. In the example below, the ID is set as richtext-editor. You can adjust the padding, font sizes, and bullet icons (●, ○, ■) as you like.

<html>
<body>
<style>
/* Customize 1st Level Bullet Points */
#richtext-editor .ql-editor li:not([class*="ql-indent-"])::before {
    content: "●"; /* Icon for 1st level */
    font-size: 16px !important; /* Size of bullet */
    margin-right: 8px !important; /* Space between bullet and text */
    color: black !important; /* Bullet color */
}

/* Customize 2nd Level Bullet Points */
#richtext-editor .ql-editor li.ql-indent-1 {
    padding-left: 4.5em; /* Indent for 2nd level */
    font-size: 17px; /* Font size for 2nd level */
}
#richtext-editor .ql-editor li.ql-indent-1::before {
    content: "○"; /* Icon for 2nd level */
    font-size: 16px !important;
    margin-right: 8px !important;
    color: black !important;
}

/* Customize 3rd Level Bullet Points */
#richtext-editor .ql-editor li.ql-indent-2 {
    padding-left: 7.5em; /* Indent for 3rd level */
}
#richtext-editor .ql-editor li.ql-indent-2::before {
    content: "■"; /* Icon for 3rd level */
    font-size: 16px !important;
    margin-right: 8px !important;
    color: black !important;
}

/* Optional 4th Level Customization */
#richtext-editor .ql-editor li.ql-indent-3::before {
    content: "□"; /* Icon for deeper levels */
    font-size: 16px !important;
    margin-right: 8px !important;
    color: black !important;
}
</style>
</body>
</html>

How to Apply:

  1. Add an HTML Element: Place it on the page where your Rich Text Editor is located and paste the code above into it.
  2. Assign the Element ID: Go to your Rich Text Editor settings and assign the Element ID as richtext-editor (or match it with your custom ID).
  3. Preview the Effect: Now your bullet points should reflect the customized styles and structure.

Let me know if this works for you! :blush:
Best,
MB Seo

:globe_with_meridians: if-dev.io | :e-mail: support@if-dev.io | :speech_balloon: Kakao Open Chat

At IF-DEV, we deeply listen, understand, and deliver creative solutions using no-code tools. We turn small ideas (if) into big transformations.

저희는 노코드 전문 에이전시 If-dev입니다. Bubble 관련 문제 해결이 필요하다면 언제든 문의주세요!