How to place these images inside the Bootstrap 3 grid?

Question

I am wondering what is the best way to place spaces between these 3 images using CSS using Bootstrap 3 RC2, since what I have done so far is not automatically resizing images, although I set the width to auto in the id tag #picture . I want them to insert and resize 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 the Fiddle for a clearer view. Is there a better way to handle this?

Answer 1

Remove your CSS for .col-lg-4 : these fields can mess Bootstrap CSS. In addition, these columns are only visible when the screen width is greater than 1200 pixels.

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

Now it should work as you wish.

Answer 2

As Harm Wellink mentioned, delete your css. You only need the following html. Pay attention to the class "col-xs-4" and "img-responsive". You do not need col-sm-4, col-md-4, col-lg-4 if you intend to have 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

If I understand your question correctly, would you like to show these photos in a horizontal line with a certain space between the images?

First of all, to change the DIV in a line, do the following

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

try specifying a width for your container and line (e.g. 100%) and then your divs containing photos. Hope this helps you?