How to Build a Landing Page Template With Bootstrap 4
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:
<!-- Banner Section -->
<!-- Process Section -->
<!-- Featured Destinations Section -->
<!-- Popular Destinations Section -->
<!-- Request a Quote Section -->
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:
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:
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-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.
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.
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.
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.