I am working with a bootstrap carousel and trying to place a card with text on top of it.
No matter what I try, the card is not appearing as desired. Here is an example of what I want to achieve: https://i.sstatic.net/tjW3w.png
Below is the code snippet:
<section id="hero">
<div class="vh-72">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/carousel_1.jpg" class="d-block w-100" alt="Carousel image one">
</div>
<div class="carousel-item">
<img src="images/carousel_2.jpg" class="d-block w-100" alt="Carousel image two">
</div>
</div>
</div>
<div class="container bg-danger">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="card">
<h1>Some title text <br> bla bla </h1>
Optimize your business success by outsourcing your production tasks and shape your processes for the future.
Our North team provides you with competent employees in industrial manufacturing production processes. <br>
<button> test </button>
</div>
</div>
</div>
</div>
</div>
</section>
I have attempted using position: absolute along with z-index, but it has not positioned the card correctly.
Here is the link to the JSFiddle: https://jsfiddle.net/txyzs8fk/