Landing page – lesson 3


Step 1

To make our content displaying perfectly in the center of X and Y axis, and at the same time do not lose the responsiveness on smaller screens, we need to use 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="fa 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 do not 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 perfectly now.


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

.justify-content-center aligns content horizontally (by using flexbox utilities).

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

By using 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 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 well rendered on mobile (because grid column is responsive).

.text-center center our content within the column.


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

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


Previous lesson Download Live preview Next lesson

Spread the word:
Do you need help?: Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.