1. Documentation
  2. Working in the Classic Unbounce Builder
  3. Classic Builder FAQ

How Do I Change the Color or Shape of Bullet Points?

Follow
Avatar
Lam Dinh
Last Updated

Changing the color of a list of bullet points in the Classic Builder can be done so using some nifty CSS!

Note:

Custom CSS will not run in the Classic Builder itself. To test out the color or shapes of these bullet points, visit the Preview version or published version of your landing page.

Changing Bullet Point Color

  1. Click the Stylesheets stylesheets.png button at the bottom of the Classic builder:

    Gif demo showing where to find stylesheet tab in Classic Builder
  2. Copy and paste the following code:
  3. On line 3, add a color code in hex format (for example, #0033FF is Unbounce blue!). More about color codes can be found at HTML Color Codes.
  4. Within your CSS, be sure to use the pound/hash symbol (#) before your hex code for it to be valid.
  5. Save and Publish/Republish the page to finalize your changes.
  6. To view this change, Preview your page, or launch your landing page in your browser. 

If you notice that the color of the text on your landing page also changes after making these changes to the bullet points, simply update the Default Text Style within the Page Properties panel on the right-hand side of the builder, or use the Inline Text Editor to change the color of that text only. 

Changing Bullet Point Shape

  1. Click on the Stylesheets stylesheets.png button at the bottom of the Classic Builder.
  2. Copy and paste the following code:
  3. On line 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 CSS list-style-type Property.
  4. Save and Publish/Republish the page to finalize your changes.
  5. To view this change, Preview your page, or launch your landing page in your browser. 

Related articles