Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by John Levy
John Levy
1,451 Points

The best way to add bullet points to text

Right now when I add a bullet point it is a lot smaller than the rest of the text. How do I make the bullet points larger or if I want to add something else such as my own images like ticks at the beginning of each bullet point how should I go about doing this? I attached my code bellow- http://codepen.io/Johned22/pen/vKzAyd Thanks in advance

4 Answers

Erik Nuber
Erik Nuber
20,629 Points 
<figure id="beginner"> 
<img src="beginnermensimage.jpg">
 <figcaption>
<p class="program">Men's Beginner</p>
<p class="info">12 Week Beach Body Abs Program</p> 
<p class="price">$0.99</p> 
<p class="Bullet1">Full 12 Week Guide</p> 
<p class="Bullet2">Perfect for men just starting out</p>
 <p class="Bullet3">88 pages</p>
 <p class="Bullet4">Full animations of each exercise</p> 
<p class="Bullet5">Get a more defined body in weeks</p>
<p class="description">This 12-week program will give you all the tools needed to rock a six pack at the beach!</p> </figure>

If there isn't a reason for having the bullet classes being called different things, You should probably name them all the same thing. 

<figure id="beginner"> 
<img src="beginnermensimage.jpg">
 <figcaption>
<p class="program">Men's Beginner</p>
<p class="info">12 Week Beach Body Abs Program</p> 
<p class="price">$0.99</p> 
<ul>
     <li class="Bullet1"><span>Full 12 Week Guide</span></li> 
     <li class="Bullet2"><span>Perfect for men just starting out</span></li>
     <li class="Bullet3"><span>88 pages</span></li>
     <li class="Bullet4"><span>Full animations of each exercise</span></li> 
    <li class="Bullet5"><span>Get a more defined body in weeks</span></il>
</ul>
<p class="description"><span>This 12-week program will give you all the tools needed to rock a six pack at the beach!</p> </figure>

Here I created a unordered list, this will automatically put bullets in. You can size the li tags which would size the bullets by doing

li {
  font-size: 25px; //whatever size you want the bullet itself to be
}

li span {
   font-size: 20px //this would modify size of the text next to the bullets
}

you could also use CSS to insert a bullet character as follows. Using your original HTML

<figure id="beginner"> 
<img src="beginnermensimage.jpg">
 <figcaption>
<p class="program">Men's Beginner</p>
<p class="info">12 Week Beach Body Abs Program</p> 
<p class="price">$0.99</p> 
<p class="Bullet1">Full 12 Week Guide</p> 
<p class="Bullet2">Perfect for men just starting out</p>
 <p class="Bullet3">88 pages</p>
 <p class="Bullet4">Full animations of each exercise</p> 
<p class="Bullet5">Get a more defined body in weeks</p>
<p class="description">This 12-week program will give you all the tools needed to rock a six pack at the beach!</p> </figure>

Here is the CSS

.Bullet1::before,
.Bullet2::before,
.Bullet3::before,
.Bullet4::before,
.Bullet5::before {
  content : "\2022  ";  //This is the Unicode character for a bullet. Same as &#8226; or &bull;
}

the content is used to place some type of content into the file, and we are specifying where it is placed which is before each of the bullet classes. This would simply put the bullets in if you don't want to use the UL tag and LI tags. If you wish to size them, you should use the previous method I mentioned of using font-size on the bullet1...bullet5 and put the text in a span tag and size them from there. I tried inserting the using the & bull; and & #8226; using the content method. You have to use the unicode with the escaped value

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Here are a couple ways to accomplish this...

You could create a span tag and add in either & #8226; or & bull; (minus the space between the & and the rest)

This would allow you to target specifically the bullet points and change their size. This would avoid having to use the list-styles that go along with a <ul> tag.

OR

just use a normal UL tag, change the font-size of the LI tag and put the contents inside the LI tag with a SPAN tag and size the SPAN tag separately.

so...

li {
   font-size: 25px;
}

li span {
   font-size: 20px;
}

for own image or marker something like this

ul {
    list-style-image: url('sqpurple.gif');
}
John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your advice. I am still a little confused though. This is the HTML code and I want to put either a bullet point or tick at the beginning of each bullet point. Can you explain how to do this using the sample code I have attachced below? Thanks <figure id="beginner"> <img src="beginnermensimage.jpg"> <figcaption><p class="program">Men's Beginner</p><p class="info">12 Week Beach Body Abs Program</p> <p class="price">$0.99</p> <p class="Bullet1">Full 12 Week Guide</p> <p class="Bullet2">Perfect for men just starting out</p> <p class="Bullet3">88 pages</p> <p class="Bullet4">Full animations of each exercise</p> <p class="Bullet5">Get a more defined body in weeks</p><p class="description">This 12-week program will give you all the tools needed to rock a six pack at the beach!</p> </figure>

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your help, that solved my problem.