How to create a responsive split screen layout with Bootstrap 4 | Wow Themes

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; }

Originally published at https://www.wowthemes.net on February 1, 2020.