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, 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?

offtopic: change id="picture"to class="picture"...you can use specific id just once, class more times..it will no solve your problem, but it will make your examle more valid — M.Svrcek, Aug 18 '13 at 23:35

score 8 · Accepted Answer · edited Jul 07 '16 at 16:51

8

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.

edited Jul 07 '16 at 16:51

Alex Weitz

3,199
4
34
57

answered Aug 19 '13 at 01:12

Harm Wellink

216
1
5

sevmusic · Answer 2 · 2014-01-19T19:37:47.917

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>

score 0 · Answer 3 · answered Aug 19 '13 at 00:18

0

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?

answered Aug 19 '13 at 00:18

Harm Wellink

216
1
5

I added your CSS. Didn't change anything. Also I changed the maxwidth:1000px of the container to just width:1000px. The row is fluid so it is 1000px to match the container size. Also the col-lg-4's width is preset by bootstrap CSS to 33.3px So.. any more suggestion? – ProEvilz Aug 19 '13 at 00:50
It is very not recommended to change attributes for such a common class. for a specific purpose. Just add another class with this attribute and add the class to your element if you think this attribute is going to fix your problem. – Ashi Aug 21 '18 at 09:53

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

3 Answers3

Linked