I am looking to enhance my bootstrap 4 carousel by displaying the carousel caption on top instead of at the bottom, similar to the example below.
https://i.sstatic.net/v2B5o.png
update: HERE IS JSFIDLE WITH FULL CODE
Here is the progress I have made so far:
HTML
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="pull-left">My Gallery Title</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-caption">
<h3>Heading 1</h3>
</div>
<img src="https://placeimg.com/600/400/nature/1" alt="Los Angeles">
</div>
<div class="carousel-item">
<div class="carousel-caption">
<h3>Heading 2</h3>
</div>
<img src="https://placeimg.com/600/400/nature/2" alt="Chicago">
</div>
<div class="carousel-item">
<div class="carousel-caption">
<h3>Heading 3</h3>
</div>
<img src="https://placeimg.com/600/400/nature/3" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<div class="modal-footer">
<button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
<!--end modal-footer-->
</div>
<!--end modal-content-->
</div>
<!--end modal-dialoge-->
</div>
<!--end myModal-->>
</div>
CSS
.carousel-caption {
position: absolute;
right: 15%;
top: -42px;
left: 15%;
z-index: 999999999;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
}
However, with this solution, my carousel caption disappears. Can you suggest a solution to achieve the desired outcome?