How do I space these images inside of a Bootstrap 3 grid system?

Question

I am wondering which is the best way to put spaces in between these 3 images with CSS using Bootstrap 3 RC2 as what I have done at the moment is not auto-resizing the images

Answer 1

If I understand your question right, you would like to show these pictures in a horizontal line, with a certain amount of space in between the pictures ?

First of all to get the DIV's in line change the following

.col-lg-4 {
   display: inline-block;
}

try to specify a width for your container and row (e.g. 100%) and then your divs holding the pictures. Hope this helps you out?

Answer 2

As Harm Wellink mentioned, remove your css. You should only need the following html. Notice the "col-xs-4" and the "img-responsive" class. You do not need col-sm-4, col-md-4, col-lg-4 if you intend to have the 3 columns on all screen sizes.

<div class="container">
<div class="row">
    <div class="col-xs-4">
        <img src="http://placehold.it/350x250" id="picture1" class="img-responsive" />
    </div>
    <div class="col-xs-4">
        <img src="http://placehold.it/350x250" id="picture2" class="img-responsive" />
    </div>
    <div class="col-xs-4">
        <img src="http://placehold.it/350x250" id="picture3" class="img-responsive" />
    </div>
</div>

Answer 3

Remove your own CSS for .col-lg-4: these margins may screw up the Bootstrap CSS. Next to that, these columns are only visible when your screen width is bigger than 1200 px.

Add the following classes to your divs: .col-xs-4 .col-sm-4 and .col-md-4, and give images a class="img-responsive" attribute.

It should work now as you wish.