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

The CSS

/* EXAMPLE ONE*

(Thanks to Jason Brothers for pointing out that text
falling under the bullet points are not indented.
These examples now have text-indent:-25px;
and margin-left: 25px; to make that happen.
Some adjustment may be needed)

*/

.fl-content .color-bullets-one UL
{
list-style: none;
padding:0;
margin:0 0 0 25px;
text-indent:-25px;
line-height: 1.6;

}
.fl-content .color-bullets-one LI::before
{
content: "⚫";
margin-right: 8px;
color: #FFC719;
font-size: 20px;
}

/* EXAMPLE TWO */
.fl-content .color-bullets-two UL
{
list-style: none;
padding:0;
margin:0 0 0 25px;
text-indent:-25px;
line-height: 1.6;
}
.fl-content .color-bullets-two LI::before
{
content: "★";
margin-right: 8px;
color: #FFC719;
font-size: 20px;
}

/* EXAMPLE THREE */

.fl-content .icon-bullets-one UL
{
list-style: none;
padding:0;
margin:0 0 0 28px;
text-indent:-28px;
line-height: 2.4;
}
.fl-content .icon-bullets-one LI::before
{
font-family:FontAwesome;
content: "\f00c ";
margin-right: 8px;
color:lightgreen;
font-size: 20px;
}


/* EXAMPLE FOUR */

.fl-content .icon-bullets-two UL
{
list-style: none;
padding:0;
margin:0 0 0 28px;
text-indent:-28px;
line-height: 2.4;
}
.fl-content .icon-bullets-two LI::before
{
font-family:FontAwesome;
content: "\f00d ";
margin-right: 8px;
color:red;
font-size: 20px;
}
/* EXAMPLE FIVE */
.fl-content .icon-bullets-three UL
{
list-style: none;
padding:0;
margin:0 0 0 28px;
text-indent:-28px;
line-height: 2.4;
}
.fl-content .icon-bullets-three LI:nth-child(odd)::before
{
font-family:FontAwesome;
content: "\f00d ";
margin-right: 8px;
color:red;
font-size: 20px;
}
.fl-content .icon-bullets-three LI:nth-child(even)::before
{
font-family:FontAwesome;
content: "\f00c";
margin-right: 8px;
color:lightgreen;
font-size: 20px;
}

/* EXAMPLE SIX */
.fl-content .icon-bullets-four UL
{
list-style: none;
padding:0;
margin:0 0 0 28px;
text-indent:-28px;
line-height: 2.4;
}

.fl-content .icon-bullets-four LI:nth-child(-n+3)::before
{
font-family:FontAwesome;
content: "\f00c";
margin-right: 8px;
color:lightgreen;
font-size: 20px;
}

.fl-content .icon-bullets-four LI:nth-child(n+4)::before
{
font-family:FontAwesome;
content: "\f00d ";
margin-right: 8px;
color:red;
font-size: 20px;
}

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

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