Split screen

Once again, click the button below and have a look at the final demo of our portfolio.

Pay attention to the characteristic screen divided into two equal parts. This is a variation of the Full Screen Hero Image, which you know from the previous tutorial.

In this lesson, we will learn a technique that will allow us to create such a Split screen.

Step 1 - create a 2 columns grid

Creating a basic Split screen layout in Bootstrap is simple, but the complications start with the details.

However, before we get to the complications in the <header> section, let's add the Split screen section, and then let's add the well-known grid, using cointainer-fluid.

Step 2 - set a height to the columns

As with the classic Hero Image, with our Split screen we also want it to always cover the full screen.

So let's add the vh-100 class to the columns, and for testing purposes, let's also add color classes to them, so that we can observe the visual effect of our changes.

And done! Simple, right?

Unfortunately, there are still a few challenges ahead of us that are not visible at first glance.

In the future we will want to add content to the columns of our Split screen and by default Bootstrap grid will add spacing between the columns.

This will spoil the concept because we want our Split screen to fit perfectly, with no gaps between the right and left columns.

To give you an idea of what I mean, let's add an empty <div> element to each column with the height set to vh-100 and the color classes so we can see them.

See the red and blue stripes? This is exactly the spacing we don't want. Ultimately, our content (i.e. green and yellow colors) should fill 100% of the screen.

Step 3 - remove the spacing

We can remove spacing between columns by adding class g-0 to the element with class row.

The spacing between the columns disappeared, but white stripes appeared on the left side of our Split screen.

This is the padding of the container-fluid element and we can remove it by adding the px-0 class.

And now it's perfect!

Step 4 - clean up the code

Finally, let's clean up our code a bit - let's remove color classes from the grid and empty <div> elements that we used for testing purposes.

And here we are, again with the white screen. But not for long ;)