title: Html Bootstrap - wrap bootstrap carousel to fit the image presented
body: <p>So, I've got a problem when trying to use a bootstrap example.</p>
  
  <p>I've copied a carousel example from bootstrap's page, and tried to use it in my own project.</p>
  
  <p>However, as seen on the picture - 
  <img src="https://i.stack.imgur.com/vAARc.png" alt="My attempt at using carousel"></p>
  
  <p>The carousel is not centered, and the prev/next buttons are going to the far left/right, instead of being over the picture, <a href="http://getbootstrap.com/javascript/#carousel" rel="nofollow noreferrer">as per bootstrap example here</a></p>
  
  <p>The code that I'm using is:</p>
  
  <pre><code>    &lt;body role="document"&gt;
  
      &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
  the navbar on the top of the page&lt;/nav&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;li data-target="#carousel-example-generic" data-slide-to="2"&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 src="http://i.imgur.com/SO9y5OH.jpg" alt="..."&gt;
                      &lt;div class="carousel-caption"&gt;
                          1
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="http://i.imgur.com/1dWsLKB.jpg" alt="..."&gt;
                      &lt;div class="carousel-caption"&gt;
                          2
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="http://i.imgur.com/GNZb3UZ.jpg" alt="..."&gt;
                      &lt;div class="carousel-caption"&gt;
                          3
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
              &lt;/div&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;/body&gt;
  </code></pre>
  
  <p>As I'm not that well-versed in html, could you please tell me, how to fit the thing neatly into the page?</p>