Carousel Indicators Beside It Bootstrap - html

Question

Is it possible in Bootstrap to have the carousel indicators beside the carousel? I want some indicators on the right side to have font on them, so I know which slider I'm clicking on.
Picture to illustrate what I want:

Answer 1

You can put the controls wherever you want, these are the tagas that make them work. href="#myCarousel" point to the carousel id and data-slide="next" sets the behavior:
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">next</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="prev">prev</a>

Answer 2

Something like this may work for you: https://codepen.io/anon/pen/zNOOrQ
HTML
<div class="container">
<div class="page-header">
<h1>Bootstrap carousel with number indicator</h1>
</div>
</div>
<div class="container">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators carousel-indicators-numbers">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">Slide 1</li><br>
<li data-target="#carousel-example-generic" data-slide-to="1">Slide 2</li><br>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x500" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/1200x500" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
CSS
.carousel-indicators-numbers {
li {
display: block;
position: relative;
left:140%;
bottom: 150px;
text-indent: 0;
margin: 0 2px;
width: 70px;
height: 30px;
border: none;
line-height: 30px;
color: #fff;
background-color: #999;
transition: all 0.25s ease;
&.active, &:hover {
margin: 0 2px;
width: 70px;
height: 30px;
background-color: #337ab7;
}
}
}