title: How to change the bootstrap carousel indicators and controls
body: <p>I stuck am trying to be able to change the location of bootstrap carousel indicators and controls. Looking like something like this carousel at this website. <a href="http://www.mitre10.co.nz/" rel="noreferrer">http://www.mitre10.co.nz/</a> Were the indicators and controls are at bottom and away from the image.</p>
  
  <p>Here is my live view <a href="http://codepen.io/riwakawebsitedesigns/pen/qdiup" rel="noreferrer">http://codepen.io/riwakawebsitedesigns/pen/qdiup</a></p>
  
  <pre><code>&lt;header id="masterhead"&gt;
  &lt;div class="container"&gt;  
  &lt;div class="slideshow"&gt;
  &lt;div id="slideshow" class="carousel slide" data-ride="carousel"&gt;
  
            &lt;ol class="carousel-indicators"&gt;   
              &lt;li data-target="#slideshow" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#slideshow" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#slideshow" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;li data-target="#slideshow" data-slide-to="3"&gt;&lt;/li&gt;
          &lt;/ol&gt;
  
          &lt;div class="carousel-inner"&gt;
  
              &lt;div class="item active"&gt;
            &lt;img src="http://s20.postimg.org/wgz1zd3wd/slide1.jpg" alt="slide"/&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
            &lt;img src="http://s20.postimg.org/l3cio5tdp/slide2.jpg" alt="slide"/&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
              &lt;img src="http://s20.postimg.org/w0ducxg59/slide3.jpg" alt="slide"/&gt;
              &lt;/div&gt;
  
              &lt;div class="item"&gt;
              &lt;img src="http://s20.postimg.org/lrld73s3h/slide4.jpg" alt="slide"/&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;a class="left carousel-control" href="#slideshow" data-slide="prev"&gt;
              &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="right carousel-control" href="#slideshow" data-slide="next"&gt;
              &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
          &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/div&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>