Q:

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

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, even though I have set the width to auto in my #picture id tag. I wish for them to b inline and resize the images accordingly.
Here is my markup:
<div class="container">
    <div class="row">
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
        <div class="col-lg-4">
            <img src="http://placehold.it/350x250" id="picture" />
        </div>
    </div>
</div>

CSS:
.container {
    max-width:1000px;
    background-color:white;
}
body {
    background-color:cyan
}
#picture {
    width:auto;
    /*margin-left:10px; */
    /*margin-right:10px; */
}
.col-lg-4 {
    margin-left:10px;
    margin-right:10px;
}

Check my Fiddle for a clearer view. Is there a better way to go about handling this?

A:

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.

