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 Bootstrap Basics Building Forms With Bootstrap Add Custom CSS to Your Bootstrap Site

Posted by 3615internet
3615internet
8,086 Points

adding speakers picture in the event list

hi there!

i can't find how to add picture at the beginning of each event line.

as we got ul / li, i looked over https://getbootstrap.com/docs/4.0/layout/media-object/#media-list. I thought i just have to add "list-unstyled" to my ul, "media" to all the li and "media-body" & an img above each div bu it seems it is not the correct solution as the image stacks over the title event :/ does anyone has complete these part of the challenge ?

Teri Dent
Teri Dent
11,515 Points
Teri Dent
Teri Dent
11,515 Points

I am having a similar problem.

The thumbnails seem to be huge and I can't figure out how to make them smaller. Something about the size of the parent element...but I can't figure that out either.

2 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

No "media" classes seemed necessary. I just added the image with a custom class "avatar", and then used custom.css to size it, float it, and give it a round border to look like the video:

index.html 
        <li class="list-group-item">
          <img class="mr-3 avatar" src="img/avatar-nodestradamus.png" alt="avatar">  <!-- new -->
          <div class="d-flex justify-content-between">
custom.css 
.avatar {
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  float: left;
}
Tomasz Denkiewicz
Tomasz Denkiewicz
11,778 Points
Tomasz Denkiewicz
Tomasz Denkiewicz
11,778 Points

without adding css class type this

    <img class="rounded-circle mr-4 float-left" style="max-width: 3rem;"  src="..//speaker thumbnails/avatar-json.png">