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 4 Basics (Retired) Building Forms with Bootstrap Custom CSS

J Scot Angus
PLUS
J Scot Angus
Courses Plus Student 5,891 Points
Posted by J Scot Angus
J Scot Angus
Courses Plus Student 5,891 Points

Using Media Object to float speaker avatar to left of Title; do I insert MediaObject into List Item, or replace list?

Context: Per Guil Hernandez 's recommendation to explore adding other features in the exercise, I'm trying to use the Bootstrap 4 Media Object to float an image (speaker's avatar) to the left of session title in the schedule. I also want to add the collapsing bit like he did, but I'll wait till I get there to ask questions about that.

My Question: Do I insert a Media Object into the existing List Item, or replace the UL altogether? Regardless, what value goes in the data-src attribute? I assumed it was the img source... but that didn't work.

Code Snippit for Inserted Media Object:

<h1 id="schedule" class="display-4 text-xs-center m-y-3 text-muted">Schedule</h1>
 <ul class="list-group">
  <li class="list-group-item">
   <div class="media">
    <a class="media-left" href="#">
     <img class="media-object" data-src="..." alt="Avatar for NodeStradamus">
    </a>
    <div class="media-body">
     <h4 class="media-heading list-group-item-heading">Keynote: Internet of Things 
      <span class="label label-default label-pill pull-xs-right 
          font-weight-normal">9:00a
      </span>
     </h4>NodeStradamus
    </div>
   </div>
  </li>
 ...
</ul>

Anyway, if I replace the UL, it doesn't look like I'll have the border around it, nor will I be able to float the pill with time to the right. OR perhaps I'm assuming too much?

Many thanks in advance!

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

Is this how you ended up doing this? I did a float left and wrote custom CSS. Just wondering as I missed this section and found it only because of this question.

<li class="list-group-item">
            <img class="pull-md-left img-fluid hidden-sm-down" src="img/avatar-nodestradamus.png" alt="photo nodestradamus">
            <h4 class="list-group-item-heading">Keynote: Internet of Things 
              <span class="label label-info label-pill pull-xs-right">9:00am</span></h4>
            NodeStradamus
</li>

ul li img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-right: 15px;
}
Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Unfortunately this was so long ago I don't quite remember. I was new to bootstrap and did not have a very good grasp. img-fluid should only be used for responsive images and, I should have left it out. I was adding in all sorts of things that weren't necessary. With my CSS it specifically set the image to the size I wanted it so it was definitely not necessary.

Also, the media object they are using here does not actually specify a size for the image. So I would assume they set some form of CSS to be applied. The documentation shows the image as being 64x64 but not sure if this is a default as a quick search doesn't indicate that. But within that same documentation they do show and example of what it is being used for; a blog. The link here is from the documentation page for the Media Object in Bootstrap. If you click on the Media Object that is in blue on the top of the page it shows you this example.

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

2 Answers

Mary-Ann Burton
Mary-Ann Burton
15,834 Points
Mary-Ann Burton
Mary-Ann Burton
15,834 Points

I personally would keep it as an unordered list, with the Media Objects embedded in the list objects,using divs.

An example: 

<ul class="list-group">
  <li class="list-group-item">
    <div class="media">
      <a class="media-left" href="#">
        <img class="media-object" src="img/nodestradamus.png" alt="Nodestradamus" width="100px">
      </a>
      <div class="media-body">
    <h4 class="list-group-item-heading">Keynote: Internet of Things <span class="label label-info label-pill pull-xs-right">9:00 am</span></h4>
          NodeStradamus
        </div>
      </div>
    </li>

the data-src tag is a responsive images tag,used to source multiple image files at once for best mobile/desktop/etc browsing experience. In this case, as we did in the example with Guil, we can just replace it with src.