Changing Bullet Style AND Position in Your Lists

We saw in our last posts how to easily change the bullet style of ordered and unordered lists. You may want to visit those posts.

We can also change the position of the bullet: inside or outside. The default is outside - as illustrated below with this unordered list:

• Here is the default bullet position
  
• Multiple lines will line up neatly underneath each other as shown. (If necessary, narrow your browser window until the line wraps.)
  

But you can specify "inside" and have the bullets indent even more! This can often enhance the presentation of your bullets.

• After creating your list, edit the UL tag to include the code in the next bullet
• <ul style="list-style-position: inside;">
• However, be aware that when using the inside position, any text that wraps will flow underneath the bullet as shown. You may or may not like the way this looks.

This works for numbered lists also, as shown below:

1. <ol style="list-style-position: inside;">
2. But just like an unordered list, lengthy text will flow underneath the bullet as shown. (Narrow your browser window if necessary.)
   

What if you want to change the bullet style and indent the bullet?

• Just type the UL tag exactly as below.
• <ul style="list-style-type: square; list-style-position: inside;">

Of course, the same applies to an ordered list. Here we have changed the bullet to Roman Numeral, and positioned the bullet inside:

1. Just type the OL tag exactly as below.
2. <ol style="list-style-type: upper-roman; list-style-position: inside;">

Bullets are so cool!

►  Check out some of our other posts about styling bullets: How to Change the Bullet Style of your Ordered List and How to Change the Bullet Style of your Unordered List

If this post has been helpful, please consider linking to our blog or sharing!  

How to Change the Bullet Style of your Ordered List

The default bullet for an ordered list

1. is a regular decimal number
2. as shown in these two bullets

You can easily change your style to upper-alpha, lower-alpha, upper-roman, lower-roman, or none. Just edit the HTML and change the OL tag as follows.

1. For upper-alpha, the OL tag should be written as follows
2. <ol style="list-style: upper-alpha">

1. For lower-alpha, the OL tag should be written as follows
2. <ol style="list-style: lower-alpha">

1. For upper-roman, the OL tag should be written as follows
2. <ol style="list-style: upper-roman">

1. For lower-roman, the OL tag should be written as follows
2. <ol style="list-style: lower-roman">

1. And for no number at all, the OL tag should be written as follows
2. <ol style="list-style: none">

Cheers!

►  Take a look at some of our related posts, such as How to Change the Bullet Style of your Unordered Lists

If this post has been helpful, please consider linking to our blog or sharing!  

How to Change the Bullet Style of your Unordered List

The default bullet for an unordered list

• is the black disc
• as shown in these two bullets

You can easily change your style to circle, square, or none. Just edit the HTML and change the UL tag as follows.

• For a circle, the UL tag should be written as follows
• <ul style="list-style: circle">

• For a square, the UL tag should be written as follows
• <ul style="list-style: square">

• For no bullets, the UL tag should be written as follows
• <ul style="list-style: none">

Cheers!

If this post has been helpful, please consider linking to our blog or sharing!