Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Bootstrap 4

How to Build a Landing Page Template With Bootstrap 4

by
Difficulty:IntermediateLength:LongLanguages:

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.

The Assets

We’ll be using a few assets in this project, here’s where you’ll find them:

  • For the icons used in this demo, I’ve incorporated the Font Awesome library into our pen.
  • All images come from Unsplash.

1. Set Out the Markup

Let’s begin! We do so with typical page markup; a header, a footer, and five sections:

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:

Note: we’ll try to keep our CSS as lightweight as possible and take advantage of Bootstrap 4’s built-in classes.

3. Build the Header

The page header includes:

  • The logo
  • The navigation
  • The contact info

Using Bootstrap’s defined breakpoints, on extra large screens it should look like this:

The header layout on extra large screens

On large screens, like this:

The header layout on large screens

On smaller screens it will have a slightly different appearance:

The header layout on small screens

Header HTML

To build the header markup, we’ll take advantage of the navbar component that Bootstrap provides.

Here’s what that looks like:

Header CSS

By default, only the mobile header (off-canvas menu) will have a background color.

However, in an upcoming section, we’ll discuss how to add a background color to the desktop header whenever the page is scrolled.

4. Build the Hero Section

The first section of our page includes:

  • A full-screen background image 
  • A heading and two call-to-action buttons which are vertically centered over that image.

Here’s what it looks like:

The section layout

Section #1 HTML

Section #1 CSS

For readability reasons, we’ll create an overlay on top of the background. We’ll then ensure that the text is placed over that overlay.

Similarly to the header, later we’ll discuss how to scale this section, each time the page is scrolled.

5. Build the Overview Section

The second section of our page includes some details which provide a quick overview once our visitors have absorbed the hero:

  • A heading
  • Four text blocks with their icons
  • A call-to-action button

On large screens and above, it should look like this:

The section layout on large screens

On small and medium screens, like this:

The section layout on small and medium screens

Finally on extra small screens, all columns are stacked:

The section layout on extra small screens

Section #2 HTML

Stacking Icons

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.

Stacking multiple icons using Font Awesome library

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.

6. Build the Split Blocks Section

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:

The section layout on medium screens and above

On narrow screens, they should be as follows:

The section layout on small screens

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:

7. Build the Image Gallery Section

The fourth section of our page includes:

  • A heading
  • Five image columns along with their description
  • A call-to-action button

On medium screens and above, it’ll look like this:

The section layout on medium screens and above

On small screens, the layout changes as follows:

The section layout on small screens

On extra small screens, all image columns are stacked:

The section layout on extra small screens

Section #4 HTML

The markup responsible for setting the columns’ content looks like this:

Section #4 CSS

Initially all images are blurry and grayscale. Each time we hover over an image, the image scales and its default filters are removed.

These are the styles to achieve that:

8. Build the Call to Action Section

The fifth section of our page includes:

  • A text block
  • A call-to-action button

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:

The section layout on medium screens and above

On smaller screens though, all elements are stacked:

The section layout on small screens

Section #5 HTML

9. Build the Footer

We’ve reached the end of our landing page template! The page footer includes:

  • An element with copyright information
  • An element with links to different pages

On medium screens and above, it should look like this:

The footer layout on medium screens and above

On smaller screens, the layout changes as follows:

The footer layout on small screens

Footer HTML

Footer CSS

The alignment of the footer links will change depending on the viewport size. Here are the rules determining that behavior:

At this point, let’s have a look at our page:

10. Add Some JavaScript Actions

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.
  • Scaling the first section.

Let’s quickly revisit the corresponding styles:

And here is the required JavaScript code:

Firing Bootstrap’s Scrollspy

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.

Here are the required page structure changes:

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.

Thanks a lot for reading!

More HTML Landing Page Resources

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.