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 Joseph Szoke
Joseph Szoke
15,087 Points

Adjusting Images in Bootstrap 3

Hi Treehouse World!

Question about using Bootstrap 3 in Wordpress:

I've setup a basic front-page and have a container with 3 rows with a col in each:

<div class="container front-contain"> <div class= "row">
<div class="text-center"></div> </div> <div class="row"> <div class="text-center"> <img src="mypic.jpg" class="" alt=""></div> </div> <div class="row"> <div class="text-center"></div> </div> </div>

I have tried a number of different methods that I've found but nothing seems to work. It is almost like my custom CSS isn't over riding something. I've selected the image itself, the col div, the row, even the container to try and change the height and width.

My overall goal is to have the image some what fluid so I am assuming width: auto; will be used. I have also tried class='img-responsive' but doesn't seem to work.

Any insight?

Thanks, Joe

3 Answers

Colin Bell
Colin Bell
29,679 Points

You don't actually have any column divs. Bootstrap row do not have a set width or height so an img with class .img-responsive is going to have max-width: 100% of the screen. You need to add in columns to a parent div to set a width.

If you use .row in bootstrap, make sure to use col-{size}-{number}, otherwise you might get a horizontal scroll bar. Rows in bootstrap have margin: 0 -15px as a default. This is to counteract the 15px left-padding of the first column and the 15px of right padding of the furthest right column.

If there is no parent div with a width set (whether it is a bootstrap defined column, or custom selector) to restrain the img, its max-width:100% will be the picture's full width.

Look at this example: http://www.bootply.com/eR7dpGHfum

The exact same picture source, but with different parent container widths set.

Joseph Szoke
Joseph Szoke
15,087 Points
Joseph Szoke
Joseph Szoke
15,087 Points

Colin,

Thanks for the response!

I was confused from Bootstraps website they mention this:

'Full width, single column:

No grid classes are necessary for full-width elements.'

I was also trying col-(size)-12 but wasn't really finding what I need. Your example helped alot though thank you!

However is there any way to avoid it going to full size when scaled down to a small device?

Thanks again, Joe

Colin Bell
Colin Bell
29,679 Points

. col-xs-# should do the trick.

Colin Bell
Colin Bell
29,679 Points

Sorry for the short answer, was in a hurry. The more robust answer is that (size) refers to the breakpoint where the column becomes full width. col-xs-# never become full width and maintain their width regardless of screen size. So a col-xs-6 will always be "width: 50%:" of its parent element. col-sm-6 will be "width: 50%:" of its parent element until the screen size gets below the small breakpoint (so anything narrower than 768px).

Here is another bootply. col-(size) examples

At large screens (1200px and up), every picture will be 25% of the page. Then as you scale down you can see each picture scale to 100% at their respective breakpoints. The first img is a col-xs-3, so it will never scale to 100%.

Just a note, you can add multiple col-(size)-# classes to a single element. multiple col classes on single elements

Here is the explanation of the grid system and a list of the breakpoints: Bootstrap Grid

Joseph Szoke
Joseph Szoke
15,087 Points
Joseph Szoke
Joseph Szoke
15,087 Points

Colin,

Thanks! It just clicked..

last question..

Is there any way to make the text fluid? I have h1 tags in a div and as I adjust down towards a mobile size they stay the same font size.

Any trick in Bootstrap I am missing or is it best to do media query adjustments?

Thanks again! Joe

Colin Bell
Colin Bell
29,679 Points

You can either set different sizes for breakpoints, use viewport units (vh or vw) instead of px or ems, or you can take a look at this jquery plugin:http://fittextjs.com.

If you do you use vh or vm as units, make sure to set a fall back size, as older android browsers and ie8< don't support it. caniuse.com vw