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 Mediumish - our most loved WordPress theme
