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

Josh Miclette
PLUS
Josh Miclette
Courses Plus Student 6,227 Points
Posted by Josh Miclette
Josh Miclette
Courses Plus Student 6,227 Points

Fixing the thumbnail that is aligned left

After several attempts to get the avatar image to work, the only working solution I found was by creating an advanced selector to target the avatar images. When I applied Bootstrap's img-fluid class to the image, the image disappeared - any thoughts?

So my question is, was using CSS necessary, or is there a way to use Bootstrap to resize the images? The CSS solution is below. 

img[src^="img/avatar"] {
  width: 50px;
  height: 50px;
}

Also, a snippet of my code is below to see if it's structurally and semantically correct. 

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

Any help will be greatly appreciated!

Thanks - Josh

3 Answers

Mark Wilkowske
PLUS
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

Hey Josh, try the attribute contains value selector - [src*="img/avatar"] - and your rule should work.

I think you will find out over time if an advanced selector is best or not. If it were me, I would avoid selecting an attribute - that way I'm not locked in to a particular file naming convention and file location.

Japneet Singh
Japneet Singh
4,675 Points
Japneet Singh
Japneet Singh
4,675 Points

Hi Josh,

i faced a similar problem and i had a different and really effective solution.

what you can do is, set the size of your image by using the width element and then use the position element. for example

.img{
width: 50%;
position:relative;
right: 50px;
}

in place of right you can also use left.

Hope this helps..

Josh Miclette
Josh Miclette
Courses Plus Student 6,227 Points
Josh Miclette
Josh Miclette
Courses Plus Student 6,227 Points

Thanks Japneet, but for some reason the CSS is not working for me. Instead of using an advanced selector, I just targeted the images themselves by using this:

.media img {
  width: 50px;
  height: 50px;
  margin-right: 5px;
}

The CSS above works fine, but would like to know if that is the best solution.