I am looking to use Bootstrap 4 to place full-height buttons on the left and right sides of a carousel, with the carousel being the largest element at a size of col-10.
This is my current progress:
@media (min-width: 768px) {
/* CSS code for responsive carousel layout */
/* [Code hidden for brevity] */
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner row w-100 mx-auto">
<div class="carousel-item col-md-4 active">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<!-- More carousel items here -->
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>I have attempted the following without success:
<button class="col-1">Left button goes here</button>
<div id="myCarousel" class="carousel slide col-10" data-ride="carousel">
<!-- Carousel content here -->
</div>
<button class="col-1">Right button goes here</button>
How can I achieve this layout design?