I'm completely new to the world of bootstrap and I can't seem to figure out why the previous and next arrows aren't appearing in the center of my slideshow images.
Currently, the arrows are positioned at the top of the slideshow and are barely noticeable.
This is the code that I used to implement the slideshow on my page:
<div id="mainBanner" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="imgs/image1.jpg" class="slidImageSize"/>
</div>
<div class="item">
<img src="imgs/image2.jpg" class="slidImageSize"/>
</div>
<div class="item">
<img src="imgs/image3.jpg" class="slidImageSize"/>
</div>
<div class="item">
<img src="imgs/image4.jpg" class="slidImageSize"/>
</div>
</div>
<!-- Controls -->
<a class="carousel-control left" href="#mainBanner" data-slide="prev"><</a>
<a class="carousel-control right" href="#mainBanner" data-slide="next">></a>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="resources/js/jquery-1.9.1.min.js"></script>
<!-- Include all compiled plugins (below) -->
<script src="resources/css/js/bootstrap.js"></script></div>I am considering adding some custom CSS styling but also wondering if I overlooked something while using bootstrap.