title: Bootstrap slideshow previous and next buttons/ arrows not showing in the middle
body: <p>I am new to bootstrap and having hard time figuring out why the previous and next arrows are NOT show in the middle of the slideshow images. </p>
  
  <p>The arrows are showing on the top of the slideshow and can barely seen. </p>
  
  <p>Here is what I used to add the slideshow to the page.</p>
  
  <pre><code> &lt;div id="mainBanner" class="carousel slide" data-ride="carousel"&gt;
    &lt;!-- Indicators --&gt;
    &lt;!-- Wrapper for slides --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="imgs/image1.jpg" class="slidImageSize"/&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="imgs/image2.jpg"  class="slidImageSize"/&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="imgs/image3.jpg" class="slidImageSize"/&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="imgs/image4.jpg" class="slidImageSize"/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Controls --&gt;
    &lt;a class="carousel-control left" href="#mainBanner" data-slide="prev"&gt;&amp;lt;&lt;/a&gt; 
    &lt;a class="carousel-control right" href="#mainBanner" data-slide="next"&gt;&amp;gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
  &lt;script src="resources/js/jquery-1.9.1.min.js"&gt;&lt;/script&gt; 
  &lt;!-- Include all compiled plugins (below) --&gt;
  &lt;script src="resources/css/js/bootstrap.js"&gt;&lt;/script&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I can add some styling to a custom CSS class but I am wondering if I missed anything when using bootstrap.</p>