Tutorial & code

Bullet Point Lists

Custom bullet point list items using only HTML and CSS. An flexible alternative to the Beaver Builder List Module.

Minimum BB plugin required: Lite Saved under: Rows
Skill level: Intermediate Contributor: David Waumsley

Template Location

Video

Notes

This is best explained on the video. In Beaver Builder version 2.4 a list module was introduced. I can see why it will help non-coders and template makers. It creates more semantic markup that trying to create the effect with the icon module.

But for simple styling I feel altering CSS values is quicker and more flexible. It may also help Beaver Builder Lite users.

See the Bullet Point Lists template in action.

Example

Code

HTML

We use the text module so the code does not need to be added manually:

<ul>
<li>This is my special list.</li>
<li>This is my custom list.</li>
<li>This list item is longer so we can set the text-indent correctly.</li>
<li>This is my styled list.</li>
<li>This only used one type of bullet.</li>
</ul>

But on example show a reversed ordered list and that this need to be added via the text (not visual tab):

<ol reversed="">
<li> Preheat oven to 425°F</li>
<li> Mix all the ingredients</li>
<li> Dump it all into a greased pan</li>
<li> Bake for 40 minutes</li>
<li> Take out and let cool 30 minutes</li>
<li> Eat</li>
</ol>

CSS

/* Here for more character codes
https://www.toptal.com/designers/htmlarrows/symbols/
*/

.fl-module-content UL {
list-style: none; /*removes the default bullet */
padding: 0;
margin: 0 0 0 28px; /* margins run top, right bottom and left - this adding margin left*/
text-indent:-42px;/* to see that longer text that wraps is neatly lined up with the text above */
}

.fl-module-content LI::before {
content: "•"; /*replacement bullet*/
color: #FFC719; /*color of the bullet*/
font-size: 50px;
line-height: 0.5;
position: relative;
margin-right:12px;
top: 10px;
}

/*Odd and Even Example*/
.fl-module-content UL{
list-style: none;
padding:0;
margin:0 0 0 28px;
text-indent:-27px;
}

.fl-module-content LI:nth-child(odd)::before
{
content: "✔";
margin-right: 8px;
color:green;
font-size: 20px;
}

.fl-module-content LI:nth-child(even)::before{
content: "✖";
margin-right: 8px;
color:red;
font-size: 20px;
}

/*nth-child Example*/
.fl-module-content UL{
list-style: none;
padding:0;
margin:0 0 0 28px;
text-indent:-28px;
line-height: 1.7;
}

.fl-module-content LI:nth-child(n+1)::before{
content: "✔";
margin-right: 8px;
color:green;
font-size: 20px;
}

.fl-module-content LI:nth-child(n+4)::before
{

content: "✖";
margin-right: 8px;
color:red;
font-size: 20px;
}

.fl-module-content LI:nth-child(5):before{
content: "✔";
margin-right: 8px;
color:green;
font-size: 20px;
}

/*Ordered list nth-child Example*/
ol {
list-style: none;
counter-reset: steps;
}
ol li {
counter-increment: steps;
line-height: 2.5;
margin: 0 0 0 -50px; /* margins run top, right bottom and left - this adding margin left*/
text-indent:0; /* to see that longer text that wraps is neatly lined up with the text above */
}

ol li:nth-child(n+1)::before {
content:counter(steps);
margin-right:12px;
background: #ffffff;
color: black;
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-grid; /*https://caniuse.com/?search=inline-grid*/
place-items: center;
line-height: 1.2;
font-family:"Arial Black", Gadget, sans-serif;
font-weight: bold;
font-size: 24px;
border: 3px solid red;
}

ol li:nth-child(n+3)::before{
background: black;
color: white;
border:none;
}


ol li:nth-child(n+4)::before {
background: #ffffff;
color: black;
border: 3px solid red;
}

Discounts On These Two Lifetime Deals:

MainWP. Discount code "digitalfreedoms" 15% off
WP Code Box. Discount code "beaverjunction" 25% off

--------------------------------------------------------------

Get the Beaver Junction Plugins here

Get it now

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.