Stick image to side responsive bootstrap

Question

I am trying to create this:

I have the left and right image and the monkey image. I was trying to create a row and make the left image col-3, the right image col-3 and the monkey and text col-6 in the middle. Everything is stacking up on each other, comes out of the screen and not working. How can I make this sort of thing?

    <section class="hero-area">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 col-xs-3">
                <img src="images/hero-left.svg" class="" alt="">
            </div>
            <div class="col-xs-6 col-md-126>
                <h1 class="">
                    <b>monKey</b> Generator</h1>
                <br>
                <h2 class="">Generate a
                    <b>unique monkey</b> avatar
                    <br> from a
                    <b>Banano public key</b>
                </h2>
                <img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6"
                    class="" alt="">
            </div>
            <div class="col-md-3 col-sm-3">
                <img src="images/hero-right.svg" class="" alt="">
            </div>
        </div>
    </div>
</section>

Answer 1

There are couple of typos in your snippet above eg: col-md-126 and missing " after that. Also bootstrap 4 does not have xs on cols so using just col-3 col-6 col-3 would do the job. See the snippet below.

img {
width:100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="hero-area">
    <div class="container-fluid">
        <div class="row">
            <div class="col-3">
                <img src="images/hero-left.svg" alt="monkey left">
            </div>
            <div class="col-6">
                <h1>
                    <b>monKey</b> Generator
                </h1>
                <br>
                <h2>Generate a
                    <b>unique monkey</b> avatar
                    <br> from a
                    <b>Banano public key</b>
                </h2>
                <img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6" />
            </div>
            <div class="col-3">
                <img src="images/hero-right.svg" class="" alt="monkey right">
            </div>
        </div>
    </div>
</section>