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>