Styling Bullet Points in a Beaver Builder Module

Video demo with examples below. To try these yourself  login on the HomePage to get your copy of this site and return here.

USING CHARSETS


You can copy and paste the unicodes/icons directly from one of the libraries here.

EXAMPLE ONE

  • Bullet points are the same colour as the text by default
  • But we can hide the bullet points with CSS
  • Then add the CSS pseudo element ::before
  • with content: "•";
  • We have a new bullet points we can color.

This Text Module has the class selector of "color-bullets-one" added under the advanced tab.

See the CSS code for this under Page Builder > Tools > Layout CSS/Javascript > CSS

EXAMPLE TWO

  • Bullet points are the same colour as the text by default
  • But we can hide the bullet points with CSS
  • Then add the CSS pseudo element ::before
  • with content: "★";
  • We have a new bullet points we can color.

This Text Module has the class selector of "color-bullets-two" added under the advanced tab.

See the CSS code for this under Page Builder > Tools > Layout CSS/Javascript > CSS

USING FONT AWESOME


You can copy and paste the icon's unicode (looks like f111) directly from the Font Awesome libraries here.

Works on themes with Font Awesome loaded (Beaver Builder theme, GeneratePress and Dynamik if turned on in design settings).

EXAMPLE THREE

  • Bullet points are the same colour as the text by default
  • But we can hide the bullet points with CSS
  • Then add the CSS pseudo element ::before
  • With content: "\f111"; and font-family: FontAwesome; (BB theme)
  • We have a new bullet points we can style.

This Text Module has the class selector of "icon-bullets-one" added under the advanced tab.

See the CSS code for this under Page Builder > Tools > Layout CSS/Javascript > CSS

EXAMPLE FOUR

  • Bullet points are the same colour as the text by default
  • But we can hide the bullet points with CSS
  • Then add the CSS pseudo element :before
  • A font awesome icon like "\f111" (BB theme)
  • We have a new bullet points we can style.

This Text Module has the class selector of "icon-bullets-two" added under the advanced tab.

See the CSS code for this under Page Builder > Tools > Layout CSS/Javascript > CSS

USING FONT AWESOME & :nth-child


Some flexibility using CSS :nth-child. Learn more here.

EXAMPLE FIVE

  • Bullet points are the same colour as the text by default
  • But we can hide the bullet points with CSS
  • Then add the CSS pseudo element ::before
  • With content: "\f111"; and font-family: FontAwesome; (BB theme)
  • We have a new bullet points we can style.

This Text Module has the class selector of "icon-bullets-three" added under the advanced tab.

See the CSS code for this under Page Builder > Tools > Layout CSS/Javascript > CSS

EXAMPLE SIX

  • Bullet points are the same colour as the text by default
  • But we can hide the bullet points with CSS
  • Then add the CSS pseudo element ::before
  • With content: "\f111"; and font-family: FontAwesome; (BB theme)
  • We have a new bullet points we can style.

This Text Module has the class selector of "icon-bullets-four" added under the advanced tab.

See the CSS code for this under Page Builder > Tools > Layout CSS/Javascript > CSS

...and a few affiliate links (well you never know)

Beaver Tunnels - Release The Beaver
Best Beaver Builder Add-ons
Ultimate Addons for Beaver Builder
Get Beaver Builder Now!