How to change the bootstrap carousel indicators and controls - html

Question

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. http://www.mitre10.co.nz/ Were the indicators and controls are at bottom and away from the image.
Here is my live view http://codepen.io/riwakawebsitedesigns/pen/qdiup
<header id="masterhead">
<div class="container">
<div class="slideshow">
<div id="slideshow" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slideshow" data-slide-to="0" class="active"></li>
<li data-target="#slideshow" data-slide-to="1"></li>
<li data-target="#slideshow" data-slide-to="2"></li>
<li data-target="#slideshow" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://s20.postimg.org/wgz1zd3wd/slide1.jpg" alt="slide"/>
</div>
<div class="item">
<img src="http://s20.postimg.org/l3cio5tdp/slide2.jpg" alt="slide"/>
</div>
<div class="item">
<img src="http://s20.postimg.org/w0ducxg59/slide3.jpg" alt="slide"/>
</div>
<div class="item">
<img src="http://s20.postimg.org/lrld73s3h/slide4.jpg" alt="slide"/>
</div>
</div>
<a class="left carousel-control" href="#slideshow" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slideshow" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</header>

Answer 1

I can't open your example site, but you can move those indicators out of their current spot and place them where you wish. I moved them out of the header in your CodePen, wrapped them in a container and added some styles to move them below your images and center them:
<div class="carousel-controls">
<a class="left carousel-control" href="#slideshow" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<ol class="carousel-indicators">
<li data-target="#slideshow" data-slide-to="0" class="active"></li>
<li data-target="#slideshow" data-slide-to="1"></li>
<li data-target="#slideshow" data-slide-to="2"></li>
<li data-target="#slideshow" data-slide-to="3"></li>
</ol>
<a class="right carousel-control" href="#slideshow" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
CSS:
.carousel-controls{
position:relative;
width:300px;
margin:0 auto;
}
.carousel-indicators{
top:0px;
}
ref: http://codepen.io/anon/pen/tayfk/

Answer 2

Here's a template for a carousel, with positionable controls, and a progress navbar at the bottom that tracks the slides.
http://codepen.io/TheNickelDime/
<!-- HTML -->
<div class="Slideshow_carousel-wrapper container-fluid">
<span class="Slideshow-ctl-L" onclick="carousel_left()"></span>
<div class="carousel slide" data-ride="carousel" ... </div>
<span class="Slideshow-ctl-R" onclick="carousel_right()"></span>
</div>
<!-- /HTML -->
<!-- CSS -->
.Slideshow_carousel-wrapper {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align:center;
width:100%;
}
/* SLIDESHOW CONTROLS LEFT / RIGHT */
.Slideshow-ctl-L {
-webkit-flex: none;
flex: none;
z-index:200;
top:40%;
margin-right:5px;
height:60px;
width:16px;
opacity:0.7;
background-size:15px 60px;
background-repeat:no-repeat;
background-image: url( ... );
}
.Slideshow-ctl-R {
-webkit-flex: none;
flex: none;
top:40%;
margin-left:5px;
height:60px;
width:15px;
opacity:0.7;
background-size:15px 60px;
background-repeat:no-repeat;
background-image: url( ... );
}
<!-- CSS -->

Answer 3

You can edit bootstrap.js to have multiple classes recognized as indicators.
var Carousel = function (element, options) {
this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators, .your-class-here')

Answer 4

You can use this JS Code to have multiple classes recognized as indicators. "the new indicators will showing the active slide and adding class active to indicator"
$('.carousel').on('slid.bs.carousel', function() {
$(".carousel-indicators2 li").removeClass("active");
indicators = $(".carousel-indicators li.active").data("slide-to");
a = $(".carousel-indicators2").find("[data-slide-to='" + indicators +
"']").addClass("active");
console.log(indicators); <!-- You can remove this line "This line makes you see the active indicator in the console in the browser" -->
})