In this tutorial we’ll continue our tour of Bootstrap 4. More specifically, we’ll learn how to use it to build a responsive landing page.
What We’ll be Working Towards
Before starting, as always, let’s take a quick look at our demo project:
Be sure to check the full screen version and resize your browser window to see how its layout changes depending on the viewport size.
Note: This tutorial assumes you have some familiarity with Bootstrap 4. For example, you should understand how its grid system and flex component work. In addition, a good understanding of its responsive breakpoints will be serve you well.
To help you get up to speed, here at Tuts+ we have a number of courses focusing on Bootstrap 4.
Let’s begin! We do so with typical page markup; a header, a footer, and five sections:
<header>...</header><main><!-- Banner Section --><section>...</section><!-- Process Section --><section>...</section><!-- Featured Destinations Section --><section>...</section><!-- Popular Destinations Section --><section>...</section><!-- Request a Quote Section --><section>...</section></main><footer>...</footer>
2. Define Some Basic Styles
Before having a closer look at the individual parts of our page, let’s first define some CSS styles. These are mostly reset rules along with a few helper classes which we’ll append to the target elements later on:
To stack multiple icons in our columns, we’ll take advantage of the styles bundled with Font Awesome. This will allow us to stack a white icon on top of a colored circle icon.
For example, below you can see the markup used for the first column. The two <i> elements are inline, next to one another, but with the fa-stack classes they become stacked.
The third section of our page includes two full-screen rows. Each row is split, containing an image column and a text column. The contents inside the text columns have to be vertically centered.
On medium screens and above, the section layout will look like this:
On narrow screens, they should be as follows:
Section #3 HTML
You’ll notice the order of the blocks above. On narrow screens the text and image blocks must alternate; image, text, image, text. This wouldn’t happen without the flexbox order- classes you’ll see used below:
Calls to action are vital on landing pages as they encourage visitors to do something instead of leaving. The pointing icon we’ve used makes the CTA particularly compelling. On medium screens and above, its appearance looks as follows:
On smaller screens though, all elements are stacked:
It’s time now to write some JavaScript that will enhance the experience of our page.
On Scroll Animations
When the page is scrolled, the body element should receive the scroll class. This class will be responsible for the following things:
Adding a background color to the header. Note that behavior should happen only on medium screens and above. Remember we’ve already set a background color for the mobile menu.
As a next step we want to automatically update the active menu link depending on the scroll position.
To do this, we’ll take advantage of Bootstrap’s Scrollspy plugin.
Following the documentation, to trigger scrollspy behavior to the navigation items, we’ll have to adjust the body element. More specifically:
Give it position:relative
Add data-spy="scroll"
Add data-target="#navbar" where #navbar is the ID of our navbar element. Inside that element there are the menu links that should receive Scrollspy’s active class.
Add data-offset="72" where 72 is the height of the desktop header as well as the height of the mobile header when the menu is closed. This option determines the menu link that will become active as soon as its corresponding section is 72 pixels from the top of the viewport.
One thing to note is that things becomes tricky when responsive offsets are required. That said, when the header has a different height depending on the screen (due to the font sizing). In such a case, giving a static value to the data-offset attribute won’t work and initializing the plugin through JavaScript (along with some custom code) is the only choice. Saying that, this is beyond the scope of our tutorial at this point.
Add Smooth Scrolling to Logo & Menu Links
Lastly, each time we click on the logo or a menu link, the browser should smoothly scroll to the appropriate section.
Thanks to jQuery’s animate method, we’re able to easily achieve this functionality. Here’s the required JavaScript code:
Notice the number 71 inside the code. This number is derived by subtracting 1 from 72 (remember that’s the header height).
My initial attempt was to put the number 72 inside the code above. However, I encountered a problem in a few browsers (e.g. Firefox–Chrome worked though). Specifically, each time a header menu link was clicked, that link didn’t immediately receive the expected active class (which comes from the Scrollspy component). That worked as soon as I scrolled down around one pixel. With that in mind, a simple fix was just to decrease the initial number by one.
Conclusion
That’s all folks! This has been a long journey, but hopefully you will have found it worth the effort. I really hope this exercise gave you enough knowledge and inspiration for building awesome landing pages with Bootstrap 4. Don’t forget to check the full screen version and make sure it matches your work.
With regards to this demo, a next step might be to make it dynamic by connecting it to a server-side language. For example, it would be great to build a WordPress theme based on this layout.
