How to create a responsive split screen layout with Bootstrap 4

How to create a responsive split screen layout with Bootstrap 4

Add comment
  ·   By Sal

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

👉 Did you know... We're working hard to put together all the Black Friday 2018 deals from around the web in one place? We've dedicated a special website to it!

Leave a comment

40+ ALL THEMES BUNDLE

Get "All Themes Bundle"
Extended License

Download our entire collection of premium themes for only .
→ View Bundle Details
Share