How to create a responsive split screen layout with Bootstrap 4

  •   Comments

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

<!-- 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

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

Leave a comment

New release Artistique