[Carousel]Dark background bellow text and Circle pagination [boostrap 4] - html

Question

Is anyone could help me with 2 stuffs or one of then on boostrap 4
I wanna do 2 stuffs just like on this IMG:
https://i.imgur.com/Vh1CDe3.png
1- Dark background below Title/Subtitle carousel's
2- I made the pagination more higher, and circular...
But how to show this right inside of circle?
How it's working now:
i.imgur.com/NT48cqX.png
full code:
<style type="text/css">
/* dark background */
#news img {
width: 1300px;
height: 400px;
}
div.carousel-caption {
background:rgba(0,0,0,0.6);
text-shadow:none;
}
div.carousel-caption:hover {
background:rgba(0,0,0,0.9);
}
/* Carousel Title */
h3, .h3 {
font-size:20px;
color: #063;
font-family:'Buenard', serif;
font-weight:bold;
text-transform:inherit;
margin: 0px auto 0px;
text-shadow: 2px 2px 2px #000;
-webkit-text-shadow: 2px 2px 2px #000;
-moz-text-shadow: 2px 2px 2px #000;
text-align: center;
}
/* Pagination */
.carousel-indicators .active {
background: #666;
}
.carousel-indicators :hover {
background-color: #cccccc;
}
.slider-pagi__elem {
padding: 10px 10px;
color: #083F2C;
text-decoration: none;
outline: none;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
font-family: Arial;
font-size: 16.9px;
position: relative;
bottom: 350px;
left: 480px;
display: inline-block;
vertical-align: top;
width: 2rem;
height: 2rem;
margin: 0 0.5rem;
border-radius: 50%;
border: 2px solid #fff;
cursor: pointer;
}
</style>
<main role="main" class="container_body">
<div class="container" id="news">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- indicators dot nov -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="slider-pagi__elem slider-pagi__elem-2"class="active">1</li>
<li data-target="#carouselExampleIndicators" class="slider-pagi__elem slider-pagi__elem-2" data-slide-to="1">2</li>
<li data-target="#carouselExampleIndicators" class="slider-pagi__elem slider-pagi__elem-2" data-slide-to="2">3</li>
<li data-target="#carouselExampleIndicators" class="slider-pagi__elem slider-pagi__elem-2" data-slide-to="3">4</li>
</ol>
<!-- wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://placehold.it/900x400" alt="">
<div class="carousel-caption">
<h3>Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h3>
<p>Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb. <a class="label label-primary" href="#" target="_blank">Read more:</a></p></p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x400" alt="">
<div class="carousel-caption">
<h3>Ccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</h3>
<p>Ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd.: <a class="label label-primary" href="#" target="_blank">Read more:</a></p></p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x400" alt="">
<div class="carousel-caption">
<h3>Ccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</h3>
<p>Ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd.: <a class="label label-primary" href="#" target="_blank">Read more:</a></p></p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x400" alt="">
<div class="carousel-caption">
<h3>Ccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</h3>
<p>Ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd.: <a class="label label-primary" href="#" target="_blank">Read more:</a></p></p>
</div>
</div>
</div>
<!-- controls or next and prev buttons -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</main>

Answer 1

The dark background at the bottom should be a div, not image. You can probably do it on the div that has a class of carousel-caption.
EDIT: The get the carousel-caption full width, change .carousel-caption from right: 15% to right: 0% and left: 15% to left: 0%
This will make the text go all the way. Don't forget to include some padding if you need a bit of space from the edge.