title: Twitter Bootstrap carousel sharing a horizontal row
body: <p>I want to set up a carousel that is 400x400 px and shares a horizontal row with another element that is to it's left. For example, I have row class which contains a span4 class and then the carousel in the code below.  However, the navigation controls aren't aligned with the carousel image (the controls don't move over to the right with the carousel, instead remaining on the left side where the span4 class is).</p>
  
  <pre><code>&lt;div class="row"&gt;
  
    &lt;div class="span4"&gt;
      &lt;h2&gt;Heading&lt;/h2&gt;
      &lt;p&gt;Some Text&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div id="this-carousel-id" class="carousel slide" style="max-width: 400px"&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="item active"&gt;&lt;img src="http://placehold.it/400x400" alt="" /&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;&lt;img src="http://placehold.it/400x400" alt="" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--  Carousel Controls --&gt;
      &lt;a class="carousel-control left" href="#this-carousel-id" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
      &lt;a class="carousel-control right" href="#this-carousel-id" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>