title: How do I space these images inside of a Bootstrap 3 grid system?
body: <p>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 <code>#picture</code> id tag. I wish for them to b inline and resize the images accordingly.</p>
  
  <p>Here is my markup:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-4"&gt;
              &lt;img src="http://placehold.it/350x250" id="picture" /&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4"&gt;
              &lt;img src="http://placehold.it/350x250" id="picture" /&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4"&gt;
              &lt;img src="http://placehold.it/350x250" id="picture" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Check my <a href="http://jsfiddle.net/mWm2m/" rel="nofollow noreferrer">Fiddle</a> for a clearer view. Is there a better way to go about handling this?</p>