Easy landing page!

How to create this

Lets first start by showing what i added to create this page above. We just added some css on the bootstrap base.

@media screen and (min-width: 992px) {
    .vmin-1oo {
        min-height: 100vh;
    }
}

.vmin-40 {
    min-height: 40vh;
}

.img-cover {
    background-position: center center;
    background-size: cover;
}

Explain!

On the .col-* in the main .container-fluid we added a .vmin-40 and .vmin-lg-1oo100% view height on large devices and a 40% view height on small devices.

Poof, height and space. Next a added a background image, added a custom .img-cover to position the image centered and sized as cover.

Text!

Added a text on the left we use bootstrap's own flex utilities to position the text centered.

I see what you did there!

Adding it all together, we end up with html looking something like this.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-5 bg-dark vmin-40 vmin-lg-1oo d-flex justify-content-center align-items-end img-cover text-white" style="background-image: url(https://images.unsplash.com/photo-1504812533430-d76f0058aff2?dpr=1&auto=format&fit=crop&w=800&q=60&cs=tinysrgb)">
            <p>
                Photo by <a href="https://unsplash.com/photos/b15nB4ykyxc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ben Kolde</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
            </p>
        </div>
        <div class="col-lg-7 vmin-1oo d-flex justify-content-center align-items-center">
            <div class="py-3">
                <h1>Easy landing page!</h1>
                <p>
                    How to quickly create an awesome landing page, or just even a beginner page on a website. We need
                    not do hard stuff. Just play!
                </p>
                <a href="#more" class="btn btn-outline-primary">
                    <span class="fa fa-chevron-right"></span>
                    Show me man!
                </a>
            </div>
        </div>
    </div>
</div>