How Do I Change Bullet Point Color/Shape?


At the moment, there isn't a built-in way to change color or shape of the bullet point in an unordered list.

However, you can achieve this change with a bit of custom CSS. 


This custom code workaround is not officially supported by Unbounce. Our Support team won't be able to help with setup or troubleshooting if issues with the code arise in the future.

Changing Bullet Point Color

  1. Click the Stylesheets button at the bottom of the edit page. stylesheets.png
  2. Copy and paste the following code:
  3. Add a color code in hex format (for example, #0098db is Unbounce blue!). More about color codes can be found at HTML Color Codes. In your CSS, you need to use the pound/hash symbol (#) before your hex code for it to be valid.
  4. Save and publish the page.


The color change won't appear within the Page Builder, since the CSS code is run later. You'll have to Preview or Republish the page to see the updated bullet points.


If you have not applied any styling to your text in the builder, your text color might change upon bullet point color changes. To prevent this, you can simply apply your text color in-app.

Changing Bullet Point Shape

  1. Click on the Stylesheets button at the bottom of the edit page.
  2. Copy and paste the following code:
  3. You can change the bullet point shape by replacing square with another value, such as disc or circle. For more about bullet point shapes, check out W3 School's HTML Lists.
  4. Once you're done, save and publish the page.


Unbounce made it easy for me to handle my issue.
Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply