Bootstrap carousel, card with text on top

Question

I have a bootstrap carousel on which I want to place a card with text.

The problem is that that whatever I try, it's not putting it on top. This is what I want:

Thi is the code:

   <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>
              Optimieren Sie Ihre Unternehmenserfolg durch Auslagerung Ihrer Produktionsleistung und gestalten Sie Ihre
              Prozesse zukunftsorientiert.
              Unser Team Nord Ihnen kompetente Mitarbeiter in Produktionsprozessen der industriellen Herstellung. <br>
              <button> test </button>
            </div>
          </div>
        </div>

      </div>

    </div>
  </section>

I've tried using position: absolute with z-index, but it just moves it wrong. Here is the JSFiddle: https://jsfiddle.net/txyzs8fk/

Answer 1

Can you please check the below code? Hope it will work for you. We gave position relative to #hero div and added one parent div hero-description of Card and gave position absolute and z-index, also we have set it's position using bootstrap utility class.

Please refer this link https://jsfiddle.net/8mdaqoup/

.row {
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

#hero { position:relative;}

.hero-description { height:100%; width:100%; position:absolute; top:0; left:0; z-index:1;}
.hero-description .card { padding:30px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>

<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="https://images.unsplash.com/photo-1608096299230-81c7b43d5dfc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1349&q=80"
                        class="d-block w-100" alt="Carousel image one">
                </div>
                <div class="carousel-item">
                    <img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1349&q=80"
                        class="d-block w-100" alt="Carousel image two">
                </div>
            </div>
        </div>
        <div class="hero-description">
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <div class="col-md-6 col-sm-12">
                        <div class="card">
                            <h1>Some text <br> bla bla bla </h1>
                           <p>
                            Optimieren Sie Ihre Unternehmenserfolg durch Auslagerung Ihrer Produktionsleistung und gestalten Sie Ihre Prozesse zukunftsorientiert. Unser Team Nord Ihnen kompetente Mitarbeiter in Produktionsprozessen der industriellen Herstellung. 
                           </p>
                            <button> test </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>