title: Stack two images side by side in bootstrap carousel
body: <p>I'm trying to do two things:</p>
  
  <p>1) Stack two images side by side on a bootstrap carousel</p>
  
  <p>2) I'd like to show 2 images side by side in desktop view and only one image in the mobile view.</p>
  
  <p>Here's my bootply:
  <a href="http://www.bootply.com/6UtgjHqm8f" rel="nofollow">http://www.bootply.com/6UtgjHqm8f</a></p>
  
  <p>I added </p>
  
  <pre><code>.carousel-inner .item img {
    display: inline-block;
  }
  </code></pre>
  
  <p>Which helps, but my alignment is off. The first image goes way off to the left and crowds the left navigation.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>   &lt;div class="content-section-b"&gt;
  
      &lt;div class="container"&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
                    &lt;!-- Indicators --&gt;
                    &lt;ol class="carousel-indicators"&gt;
                      &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                      &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
                    &lt;/ol&gt;
  
                    &lt;!-- Wrapper for slides --&gt;
                    &lt;div class="carousel-inner" role="listbox"&gt;
                      &lt;div class="item active"&gt;
                        &lt;img class="img-responsive" src="http://www.onvia.com/responsive/apples_01.png" alt="Apples"&gt;
                        &lt;img class="img-responsive" src="http://www.onvia.com/responsive/oranges_01.png" alt="Oranges"&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                        &lt;img class="img-responsive" src="http://www.onvia.com/responsive/pears_01.png" alt="Pears"&gt;
                        &lt;img class="img-responsive" src="http://www.onvia.com/responsive/mangos_01.png" alt="Mangos"&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;!-- Controls --&gt;
                    &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
                      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
                      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                    &lt;/a&gt;
                    &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
                      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
                      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;!-- /.container --&gt;
  
  &lt;/div&gt;
  &lt;!-- /.content-section-b --&gt;
  </code></pre>
  
  <p>Here's my CSS:</p>
  
  <pre><code>    .content-section-b {
      padding: 50px 0;
      background-color: #3C5A78;
  }
  
  .carousel-control.left {
      background-image:none;
  }
  
  .carousel-control.right {
      background-image:none;
  }
  </code></pre>