How to create a responsive split screen layout with Bootstrap 4

What are split screen layouts?

A split screen layout is in use when full-screen elements are divided into two or more vertical parts. Split screen layouts have become a popular way to showcase content. They are great choices for landing pages, sign in/register pages etc.

In this example we’ll show you a login page template using a split screen Bootstrap 4 layout. This login page is part of our Bootstrap UI Kit Anchor. You can view it in action here.

HTML code:

<div class="d-md-flex h-md-100 align-items-center">

    <!-- First Half -->
    <div class="col-md-6 p-0 bg-indigo h-md-100">
        <div class="text-white d-md-flex align-items-center h-100 p-5 text-center justify-content-center">
            <div class="logoarea pt-5 pb-5">
                First half content here
            </div>
        </div>
    </div>

    <!-- Second Half -->
    <div class="col-md-6 p-0 bg-white h-md-100 loginarea">
        <div class="d-md-flex align-items-center h-md-100 p-5 justify-content-center">
            Second half content here
        </div>
    </div>
        
</div>

CSS Code:

@media (min-width: 768px) {
    .h-md-100 { height: 100vh; }
}
.btn-round { border-radius: 30px; }
.bg-indigo { background: indigo; }
.text-cyan { color: #35bdff; }

Demo Play on Codepen Download

promo   Mediumish WordPress theme