Image carousel while using Bootstrap 4 jumbotron c

I am building a mockup website and was able to build out the barebones so far.

#hero {
    background: url("https://picsum.photos/1280/710") no-repeat center;
    background-size: cover;
}

.book {
    height: 100px;
    width: 100px;
    bottom: 9vh;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./styles.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Etomon</title>
</head>
<body>
    <div class="jumbotron jumbotron-fluid hero" id="hero">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-7 mb-4 book">
                    <img src="./images/book.png" class="book">
                    <h1 class="logo h2 text-light">Etomon</h1>
                </div>
                <div class="col search">
                    <input type="text" class="" placeholder="Search?">
                    <button type="submit">Submit</button>
                    <form>
                        subject/course <br>
                        <input type="text" placeholder="Graphic Design"> <br> level <br>
                        <input type="text" placeholder="Intermediate"> <br> starting <br>
                        <input type="text" placeholder="mm/dd/yyyy"> <br> ending <br>
                        <input type="text" placeholder="mm/dd/yyy"> <br>
                        <button type="submit">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col">
                <h1 class="popular text-center">Most Popular Subjects</h1>
            </div>
        </div>
    </div>
</body>
</html>

I want to add an image carousel within the div with the class .jumbotron to give it a similar look to this screenshot.

You can see in the css I have the div with the id #hero grabbing the background image. When I try to replicate w3s Bootstrap carousel I end up with the carousel being above my content. How do I keep it within that jumbotron?

You could do something like the one below.
The #carousel is absolutely positioned, and stretched to fill the area of the jumbotron. In order to make this work, the jumbotron got an explicit position: relative. Finally .carousel-inner and .carousel-item has their height set to 100% to fill up the space as well. (As .carousel-item is now background-only, it has to have a set height.)

#hero {
    position: relative;
}
#carousel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.carousel-inner,
.carousel-item {
    height: 100%;
}
.carousel-item {
    background: no-repeat center/cover;
}

.book {
    height: 100px;
    width: 100px;
    bottom: 9vh;
}

<div class="jumbotron jumbotron-fluid hero" id="hero">
    <div class="container">
        <!-- Here is the carousel, `position:absolute` -->
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active" style="background-image:url('https://picsum.photos/1280/710')"></div>

                <div class="carousel-item" style="background-image:url('http://via.placeholder.com/1280x710/adeee3/ffffff?text=Another+image')"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-12 col-md-7 mb-4 book">
                <img src="./images/book.png" class="book">
                <h1 class="logo h2 text-light">Etomon</h1>
            </div>
            <div class="col search">
                <input type="text" class="" placeholder="Search?">
                <button type="submit">Submit</button>
                <form>
                    subject/course <br>
                    <input type="text" placeholder="Graphic Design"> <br> level <br>
                    <input type="text" placeholder="Intermediate"> <br> starting <br>
                    <input type="text" placeholder="mm/dd/yyyy"> <br> ending <br>
                    <input type="text" placeholder="mm/dd/yyy"> <br>
                    <button type="submit">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col">
            <h1 class="popular text-center">Most Popular Subjects</h1>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>