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
Brian Wente
296 PointsQ: Bootstrap - Wrapping text around images
Which is the better way? Is there a correct way? I hate to have to put extra divs for every image, but I don't want to create multiple images styles to size my photos either. I guess most layouts would have a row with two columns ( 9 | 3 ) but I do not want two columns I would like the text to wrap.
<div class="col-lg-12"><p>lorem ipsum dolor sit...more text here</p>
<div class="col-lg-3"><img class="img-responsive" src="https://dl.dropboxusercontent.com/u/30198996/Treehouse/images/treehouse-blog.png"></div></div>
vs
<div class="col-lg-12"><p>lorem ipsum dolor sit...more text here</p>
<img class="col-lg-3 img-responsive" src="https://dl.dropboxusercontent.com/u/30198996/Treehouse/images/treehouse-blog.png">
</div>
2 Answers
Nick Ocampo
15,661 PointsI would go with option 1. I completely agree about not liking to wrap everything around divs though. It looks ugly and it adds no semantic value to the HTML code. It's the biggest weakness of the grid system IMO. On the other hand, adding column classes to your image elements will probably end up giving you trouble. I think it's always better to size an image relative to its containing div, instead of messing with the image size too much.
Brian Wente
296 PointsThanks Nick!
It seems strange to have a div inside there floating around, but it makes it easier to get consistently sized photos in the layout. I might add a "editorial" class for the row and "editorial photo-left" and a "editorial photo-right" classes. Maybe using LESS to generate the addition width classes. I need this to be simple enough to be added with a CMS.
Nick Ocampo
15,661 PointsYeah a really convenient part of having the columns as divs is that you can add or switch elements from your page without messing up your layout (assuming you're not messing with those divs). So for instance, later down the line when you have a ton of code, you may decide to remove that image, and all of a sudden that broke your layout. So having those divs like that also helps you separate content from layout. Especially in the case of using a CMS, you'll definitely want to have the divs be separate, because most of your content will be dynamic {generated from the CMS, as opposed to hard coded on a file), so adding those classes can become a pain the ass. It's much easier to have them as separate elements.