Flexbox advanced options

Step 1

To make our content display perfectly in the center of the X and Y axes, and at the same time to not lose the responsiveness on smaller screens, we need to use a quite complicated structure.

Within your .view element replace the existing code with the following snippet:

<!--Mask-->
<div id="intro" class="view">

    <div class="mask rgba-black-strong">

        <div class="container-fluid d-flex align-items-center justify-content-center h-100">

            <div class="row d-flex justify-content-center text-center">

                <div class="col-md-10">

                    <!-- Heading -->
                    <h2 class="display-4 font-weight-bold white-text pt-5 mb-2">Travel</h2>

                    <!-- Divider -->
                    <hr class="hr-light">

                    <!-- Description -->
                    <h4 class="white-text my-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur.</h4>
                    <button type="button" class="btn btn-outline-white">Read more<i class="fas fa-book ml-2"></i></button>

                </div>

            </div>

        </div>

    </div>

</div>
<!--/.Mask-->

    

I know, it's a lot of new classes and that construction looks tricky but don't panic. I'll explain to you step by step what's going on here.

PS: If you look at your website you will see that your Intro looks perfect now.

We use .container-fluid because we're going to take advantage of the Bootstrap Grid system and place rows and columns inside. I hope you remember, from the previous lessons, to always use the construction .container (or .container-fluid) > .row > column when using the grid.

Then .justify-content-center that aligns that content horizontally (by using the Flexbox utilities).

We've added .row inside our container that is a typical grid construction.

By using the Flexbox utilities (.d-flex and .justify-content-center) we've set the .row to display its content in Flexbox mode

Inside the .row we've also created a column .col-md-10. Thanks to that, our content on big screens won't be extremely stretched (which looks ugly and unprofessional) and at the same time, it will be rendered well on mobile devices (because the grid column is responsive).

Finally .text-center centers our content within the column.

That's it! You've created a perfect full page Intro. Congratulations :)

Now let's move forward and add some new, exciting elements to our website.