Building a Landing Page with Bootstrap and jQuery

Bootstrap is an immensely popular front-end framework for developing responsive web sites and web applications. It is a collection of reusable components written in HTML, CSS, and JavaScript.

The advantages of using Bootstrap are:

  1. Responsive design
  2. Wide browser compatibility
  3. Re-usable components
  4. Ease of use
  5. A large community of users

Now that we know what Bootstrap is, let us try to get a better understanding of the concepts by building a fully responsive Landing Page. We will mostly use Bootstrap 4, and a tad bit jQuery to enhance the user experience.

Let us start by looking into the demo project. You can also check the full-screen version here.

The demo shows a Landing Page for a make-believe Karate Academy. The template is a great starting point and can be customized to build a portfolio site or a company website.

The web page is divided into the following sections:

  1. Navbar
  2. Hero
  3. About
  4. Instructors portfolio
  5. Testimonial
  6. Footer

Project Structure

  • index.html
  • style.css
  • scripts.js

Adding Bootstrap to Our Project

This is our basic HTML file – we start by adding the Bootstrap CDN in a <link> tag. Next, we add our custom CSS file and other dependencies such as Google Fonts and Font Awesome icon API’s. Bootstrap components need jQuery, Popper.JS, and JavaScript to function. So we will need to add these dependencies as well. As a best practice, we should add them right before the closing <body> tag. Another important tag we need to add to our HTML file is the meta tag:

This is to ensure responsiveness across devices.

NOTE: jQuery slim version CDN does not support animation. Since we will be using the jQuery animate() method in our project, we have to make sure not to use the slim version.  We can use the minified CDN version instead.

Now, we are all set to start working on our Landing Page.

1. Navbar:

Bootstrap provides a navbar component.  We can use that to create a responsive navigation header for our website or application. While the navbars are displayed in collapsed mode and expand on user click on smaller viewports like mobile devices, they are displayed in horizontal mode on medium and large devices. We can create different variations of the navbar by adding different sub-components such as navigation links, search form, brand logo or text. These components are available as part of the Bootstrap library.  We will have to add the respective Bootstrap classes to our HTML elements to achieve these variations. 

Here is the code for the navbar for our Landing Page:

Let’s take a look at the key classes in the code chunk above.

  • To create a standard navigation bar, first, we need to add the class .navbar. Next, we will add .navbar-expand-xl|lg|md|sm class which specifies the breakpoint at which the navbar will expand from the collapsed mode. In our case, we set it to .navbar-expand-lg.
  • .navbar-light class is to add the pre-designed light color version of navbar.
  • .bg-light class is used to set the background of the navbar to a light gray color.
  • .fixed-top class is used to keep the navbar affixed to the top of the screen which allows it to scroll with the page.
  • .navbar-brand class is used to style the logo of the page. We also added some custom CSS style to the logo.
  • to create a collapsible navigation bar we used a button with class .navbar-toggler and data-target=“#navbarNavAltMarkup”. Then, we used an <div> element to wrap all the links – home, about, instructors and contact, with an id=“navbarNavAltMarkup”. The data-target value and the ‘id’ should match. This helps to bind the two together.
2. Hero:

Below the navbar, we have a hero section. It has a cover image, some text, and a button. It also has a bouncing dropdown arrow which was created using custom CSS and jQuery. We will see the details of it towards the end of this tutorial.

Let’s explore the HTML part of the hero section now.

   Classes Used:
  • We start by using the <section> element which acts as a wrapper for all the elements in this particular section. Then we add the image to the section element, using inline style. Thereafter, we add Bootstrap classes like .d-flex to enable flex property of the image and .align-items-center to center align the image. We also add the height attribute with vh-100 and some custom CSS by adding .cover class to style the image.
  • Next, we add an <div> element with class .container-fluid for a full width container that spans the entire width of the viewport. Then we add the text contents by defining the column size for different viewports. For xs and sm devices, the column is set to span 100% width. For md devices, its 8 columns wide, for lg devices, it spans to 6 columns and for xl devices, it is 5 columns wide. 
  • Finally, we add a button with class .btn which adds the pre-defined Bootstrap button property. We will also .btn-danger class to give it a red color.
3. About:

Below the hero section, we have an about section. This section has three sub-sections. We will use the Bootstrap grid system to divide the area into three parts and use Font Awesome for adding the icons.

Note: To use the Font Awesome icon in our project, first we will need to add the CDN link in the <head> tag.

  Classes Used:
  • We add the class col-sm-6 and col-lg-4 to define the width of the columns for our devices. Since the width is not mentioned for xs devices, each sub-section of our about section will take 100% device width. For sm and md devices two sub-sections will be displayed in a row and for lg and xl devices, all three subsections will be displayed in a row.
  • We also use .mb-3 class to add a bottom margin of 1 rem and .text-muted class to add a light gray color to the font.
  • .text-danger to add red color text.
4. Instructor:

This section consists of instructor portfolios with an image, name and some additional information. We will use the Bootstrap card component to create this section.

Cards are very effective when we want to display a listing of similar items, e.g. portfolio projects, pictures, recipes, blog posts and so on. The Bootstrap card component has many sub-components that can be incorporated inside the cards. Header, footer, body just to name a few.

Here is the code for this section.

Classes Used:

First, we will need to create the cards by applying the .card class to an <div> element. This will create the outer card container. The other Bootstrap classes that we will need to add in order to style the cards are – .shadow to give a shadow effect, border-0 to remove any borders and h-100 to make sure that all the cards are of equal height.

Now, that the outer card container is ready we will need to design the inner part of the card. We will use .card-img-top class on the <img> tag. This ensures that the images adhere to any border-radius that is implemented on the cards. We will also use .card-body class to add some padding to the body content, .card-title class to highlight instructor names and .card-text class for the text content inside the cards.

Now, let’s move on to the next section.

5. Testimonials:

It is always a good idea to include a reviews/testimonials section in the Landing Page. For this section, we will make use of the Bootstrap carousel component.  This component cycles through elements creating a slideshow. We can include images and texts in the sliders. It also supports indicators for prev/next slide.

 Classes Used:
  • To create a carousel, we have to add .carousel and .slide to an outer container.
  • The scrollable items are wrapped in a .carousel-inner class. Each item is given a .carousel-item class.
  • .active class is added to one of the carousel items to set it as an initial slide.
  • To add prev/next indicators, we need to add a list item with .carousel-indicators class.

We are almost at the end of our project. Let’s take a look at the last and final section.

6. Footer:

This section is divided into three columns – contact, pages, and favorites. It also has social icons and copyright information at the bottom.

The code for this section is pretty straight forward. We will use the Bootstrap grid system to define the columns. To take care of spacing and background styles, we will add Bootstrap utility classes.

 Classes Used:
  • py-5 and py-3 classes to add vertical padding of 3 rem and 1 rem to the element.
  • mb-4 to add a bottom margin of 1.5 rem to the element.
  • .list-unstyled to remove any browser list-styles on the element.

Now that we have covered Bootstrap. Let’s move to the jQuery portion of our Landing Page.

jQuery is a JavaScript library that simplifies HTML DOM traversing, event handling, animating and AJAX interactions. It helps in creating dynamic effects throughout the application by calling on several methods.

For our Landing Page we will use the following jQuery functionalities:

  1. Our first functionality will be to scroll to the top of our Landing Page,  whenever the page is refreshed.

Note: This functionality has been tested on Chrome and Firefox but will require some tweaks for Safari.

Here, we are adding the ‘beforeunload’ event handler on the window object. This event is fired when the window, the document, and its resources are about to be unloaded. Inside it, the scrollTop is set to ‘0’. The Element.scrollTop property gets or sets the number of pixels so that an element’s content can be scrolled vertically. Setting the scrollTop property this way ensures that the page will scroll back to the top whenever it is refreshed.

2. Next, we will configure our bouncing downward arrow in the hero image so that it redirects the users to the about section whenever they click on it.

  • Once the document is ready, we then add a ‘click’ event on the downward arrow element by selecting it with its id (‘#down’).
  • Next, we will be making use of the jQuery animate() method. We will set the body scrollTop property of the element with id “#about” to the offset top position after 1000 milliseconds.

Here we have it, a fully responsive Landing Page requiring minimal coding that provides a great user experience.

I hope this tutorial gave you a peek into the exciting world of Bootstrap and set you on the path to creating some splendid Landing Pages and wow everyone.

Thanks for reading!

Related Posts