Bootstrap carousel controls not reflecting the styles - html

Question

I want my carousel controls to be something like this(Link at the end). and they should be outside the carousel. but when I tried to add styles, nothing seems to reflect, is there anything I am missing. Please help me out.
Thanks in advance.
Expected carousel control- left
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
position: absolute;
top: 83% !important;
z-index: 5;
display: inline-block;
margin-top: -10px;
}
h4 {
margin: 20px 10px 10px;
}
p {
margin: 10px;
}
#carousel-example-generic {
margin: 20px auto;
width: 400px;
}
#carousel-custom {
margin: 20px auto;
width: 400px;
}
#carousel-custom .carousel-indicators {
margin: 10px 0 0;
overflow: auto;
position: static;
text-align: left;
white-space: nowrap;
width: 100%;
}
#carousel-custom .carousel-indicators li {
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
display: inline-block;
height: auto;
margin: 0 !important;
width: auto;
}
#carousel-custom .carousel-indicators li img {
display: block;
opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
opacity: 0.75;
}
#carousel-custom .carousel-outer {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
<div class='carousel-outer'>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='item active'>
<img src='http://placehold.it/400x200&text=slide1' alt='' />
</div>
<div class='item'>
<img src='http://placehold.it/400x200&text=slide2' alt='' />
</div>
<div class='item'>
<img src='http://placehold.it/400x200&text=slide3' alt='' />
</div>
<div class='item'>
<img src='http://placehold.it/400x200&text=slide4' alt='' />
</div>
<div class='item'>
<img src='http://placehold.it/400x200&text=slide5' alt='' />
</div>
<div class='item'>
<img src='http://placehold.it/400x200&text=slide6' alt='' />
</div>
</div>
</div>
<!-- Controls -->
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li data-target='#carousel-custom' data-slide-to='0' class='active'><img src='http://placehold.it/100x50&text=slide1' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='1'><img src='http://placehold.it/100x50&text=slide2' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='3'><img src='http://placehold.it/100x50&text=slide4' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='4'><img src='http://placehold.it/100x50&text=slide5' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='5'><img src='http://placehold.it/100x50&text=slide6' alt='' /></li>
</ol>
</div>
I want my carousel controls to be something like this(Link at the end). and they should be outside the carousel. but when I tried to add styles, nothing seems to reflect, is there anything I am missing. Please help me out.

Answer 1

Working Demo below: added the pic you give just customize the pic and upadte the image url.
.carousel-control img{
z-index: 5;
display: inline-block;
margin-top: 100%;
position:relative;
}
h4 {
margin: 20px 10px 10px;
}
p {
margin: 10px;
}
#carousel-example-generic {
margin: 20px auto;
width: 400px;
}
#carousel-custom {
margin: 20px auto;
width: 400px;
}
#carousel-custom .carousel-indicators {
margin: 10px 0 0;
overflow: auto;
position: static;
text-align: left;
white-space: nowrap;
width: 100%;
}
#carousel-custom .carousel-indicators li {
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
display: inline-block;
height: auto;
margin: 0 !important;
width: auto;
}
#carousel-custom .carousel-indicators li img {
display: block;
opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
opacity: 0.75;
}
#carousel-custom .carousel-outer {
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<img src="https://i.stack.imgur.com/4HGNH.jpg" />
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<img src="https://i.stack.imgur.com/4HGNH.jpg" />
</a>
<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
<div class='carousel-outer'>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='item active'>
<img src='http://placehold.it/400x200&text=slide1' alt='' />
</div>
<div class='item'>
<img src='http://placehold.it/400x200&text=slide2' alt='' />
</div>
<div class='item'>
<img src='http://placehold.it/400x200&text=slide3' alt='' />
</div>
<div class='item'>
<img src='http://placehold.it/400x200&text=slide4' alt='' />
</div>
<div class='item'>
<img src='http://placehold.it/400x200&text=slide5' alt='' />
</div>
<div class='item'>
<img src='http://placehold.it/400x200&text=slide6' alt='' />
</div>
</div>
</div>
<!-- Controls -->
<!-- Indicators -->
<ol class='carousel-indicators'>
<li data-target='#carousel-custom' data-slide-to='0' class='active'><img src='http://placehold.it/100x50&text=slide1' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='1'><img src='http://placehold.it/100x50&text=slide2' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='3'><img src='http://placehold.it/100x50&text=slide4' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='4'><img src='http://placehold.it/100x50&text=slide5' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='5'><img src='http://placehold.it/100x50&text=slide6' alt='' /></li>
</ol>
</div>