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:

Responsive design
Wide browser compatibility
Re-usable components
Ease of use
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:

Navbar
Hero
About
Instructors portfolio
Testimonial
Footer

Project Structure

index.html
style.css
scripts.js

Adding Bootstrap to Our Project

<!--index.html -->

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <!--Bootstrap CDN-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!--Custom CSS Stylesheet and other dependencies-->
        <link rel="stylesheet" href="./style.css" />
        <link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet"/>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
        <title>Bootstrap Landing Page</title>
    </head>
    <body>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  
    </body>
</html>

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:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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.

/* CSS style for the body */
body {
    margin: 0;
    padding: 0;
    font-family: "Lora", serif;
}

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:

<!-- index.html -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand font-weight-bold" href="#"><span><i class="fas fa-walking text-danger logo"></i></span> American Karate Academy</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto font-weight-bold">
            <a class="nav-item nav-link active" href="#home">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#about">About</a>
            <a class="nav-item nav-link" href="#instructors">Instructors</a>
            <a class="nav-item nav-link" href="#contact">Contact</a>
        </div>
        <div class="navbar-text ml-lg-3">
            <a href="#" class="btn btn-danger text-white shadow font-weight-bold">Start Today</a>
        </div>
    </div>
</nav>

/* Logo Style */

.logo {
    font-size: 35px;
    margin-left: 25px;
    font-weight: bold;
}

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.

<!-- index.html -->
<section id="home" class="d-flex align-items-center position-relative vh-100 cover" style="background-image:url(./images/karateHero1.jpg);">
    <div class="container-fluid container-fluid-max">
        <div class="row">
            <div class="col-12 col-md-8 col-lg-6 col-xl-5">
                <h1 class="text-white heroText">Self Defense</h1>
                <h1 class="text-white heroText">Training</h1>
                <h1 class="text-white heroText">Class</h1>
                <div class="mt-6">
                    <a class="btn btn-danger text-white heroButton" href="" role="button">More Info</a>
                </div>
            </div>
        </div>
        <div class="col-12 downArrow"><span id="down"><i class="fas fa-caret-down bounce"></i></span></div>
    </div>
</section>

/* Cover Image Styles */

.cover {
    background: no-repeat center/cover;
    background-attachment: fixed;
}

.heroText {
    margin-left: 23%;
    font-size: 35pt;
    font-weight: bold;
}

.heroButton {
    margin-left: 25%;
    width: 160px;
    padding: 10px 20px;
    font-weight: bold;
}

.downArrow {
    display: flex;
    justify-content: center;
    top: 25vh;
}

#down {
    font-size: 2.5em;
    font-weight: bolder;
    color: black;
    opacity: 0.9;
    line-height: 0.5;
    border-radius: 5px;
    cursor: pointer;
    /* padding: 1px #343a40;
    padding-top: -10px; */
}

#down:hover {
    color: #dc3545;
    opacity: 0.8;
}

.bounce {
    position: relative;
    left: 50%;
    bottom: 0;
    margin-top: -25px;
    margin-left: -25px;
    height: 50px;
    width: 50px;
    -webkit-animation: bounce 1s infinite;
    -moz-animation: bounce 1s infinite;
    -o-animation: bounce 1s infinite;
    animation: bounce 1s infinite;
}

@-webkit-keyframes bounce {
    0% {
        bottom: 0px;
    }
    50% {
        bottom: 15px;
    }
    100% {
        bottom: 30;
    }
}

@-moz-keyframes bounce {
    0% {
        bottom: 0px;
    }
    50% {
        bottom: 15px;
    }
    100% {
        bottom: 30;
    }
}

@-o-keyframes bounce {
    0% {
        bottom: 0px;
    }
    50% {
        bottom: 15px;
    }
    100% {
        bottom: 30;
    }
}

@keyframes bounce {
    0% {
        bottom: 0px;
    }
    50% {
        bottom: 15px;
    }
    100% {
        bottom: 30;
    }
}

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.

<!--index.html -->
<section id="about">
    <div class="container">
        <h2 class="text-dark text-center topGap font-weight-bold">About Us</h2>
        <hr class="hrStyle" />
        <p class="text-muted text-center mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Nullam a sollicitudin sapien. Pellentesque ac aliquet massa. Curabitur est tellus, mollis aliquet volutpat nec, vestibulum vel velit. Donec maximus vehicula ligula.</p>
        <div class="row">
            <div class="col-sm-6 col-lg-4 mb-3">
                <h6><span><i class="fas fa-dumbbell text-danger fontSymbolsAbout"></i></span><strong> Professional Instructors</strong></h6>
                <p class="text-muted">Nullam a sollicitudin sapien. Pellentesque ac aliquet massa. Curabitur est tellus, mollis aliquet volutpat nec, vestibulum vel velit. Donec maximus vehicula ligula.</p>
            </div>
            <div class="col-sm-6 col-lg-4 mb-3">
                <h6><span><i class="fas fa-calendar-times text-danger fontSymbolsAbout"></i></span><strong> Flexible time</strong></h6>
                <p class="text-muted">Nullam a sollicitudin sapien. Pellentesque ac aliquet massa. Curabitur est tellus, mollis aliquet volutpat nec, vestibulum vel velit. Donec maximus vehicula ligula.</p>
            </div>
            <div class="col-sm-6 col-lg-4 mb-3">
                <h6><span><i class="fas fa-money-check-alt text-danger fontSymbolsAbout"></i></span><strong> Money Saving</strong></h6>
                <p class="text-muted">Nullam a sollicitudin sapien. Pellentesque ac aliquet massa. Curabitur est tellus, mollis aliquet volutpat nec, vestibulum vel velit. Donec maximus vehicula ligula.</p>
            </div>
        </div>
    </div>
</section>

/* About section styles */

.hrStyle {
    width: 100px;
    border-top: 2px solid red;
    margin-top: 0px;
    margin-bottom: 30px;
}

.fontSymbolsAbout {
    font-size: 25px;
    margin-right: 10px;
    text-align: center;
}

.topGap {
    padding-top: 10rem;
}

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.

<!-- index.html -->
<section id="instructors" class="bg-light mb-5 pb-5">
    <div class="container text-center">
        <h2 class="text-dark topGap font-weight-bold">Our Instructors</h2>
        <hr class="hrStyle" />
        <p class="text-muted mb-5">In enim non sit irure ut adipisicing laboris et laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card shadow border-0 h-100">
                    <a href="#"><img src="images/instructor1.jpg" alt="" class="card-img-top"></a>
                    <div class="card-body">
                        <h5 class="text-danger card-title">Jane Doe</h5>
                        <p class="text-muted card-text">Ex cupidatat eu officia consequat incididunt labore occaecat ut veniam labore et cillum id et.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card shadow border-0 h-100">
                    <a href="#"><img src="images/instructor2.jpg" alt="" class="card-img-top"></a>
                    <div class="card-body">
                        <h5 class="text-danger card-title">John Doe</h5>
                        <p class="text-muted card-text">Ex cupidatat eu officia consequat incididunt labore occaecat ut veniam labore et cillum id et.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card shadow border-0 h-100">
                    <a href="#"><img src="images/instructor3.jpg" alt="" class="card-img-top"></a>
                    <div class="card-body">
                        <h5 class="text-danger text-align-center card-title">John Wick</h5>
                        <p class="text-muted card-text">Ex cupidatat eu officia consequat incididunt labore occaecat ut veniam labore et cillum id et.</p>
                    </div>
                </div>
            </div>
        </div>
</section>

/* Instructors section styles */

.card-img-top {
    height: 300px;
}

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.

<!-- index.html -->
<section id="testimonial">
    <div class="container text-center revs">
        <h2 class="text-dark font-weight-bold">Testimonials</h2>
        <hr class="hrStyle" />
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active mt-4">
                    <p>"Est ultricies integer quis auctor elit sed. In nisl nisi scelerisque eu ultrices vitae auctor eu. Velit laoreet id donec ultrices tincidunt arcu non sodales."</p>
                    <p class="text-muted">-Jane Doe</p>
                </div>
                <div class="carousel-item">
                    <p>"Egestas integer eget aliquet nibh. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Condimentum lacinia quis vel eros donec. "</p>
                    <p class="text-muted"> -John Doe</p>
                </div>
                <div class="carousel-item">
                    <p>"Tellus id interdum velit laoreet id donec ultrices tincidunt arcu. Sed viverra ipsum nunc aliquet bibendum enim facilisis. Sed augue lacus viverra vitae congue eu consequat ac."
                    </p>
                    <p class="text-muted">-John Wick</p>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</section>

/* Testimonial section styles */

.revs {
    padding: 90px;
}

.carousel-indicators {
    margin: -20px;
}

.carousel-indicators li {
    border: 1px solid #ccc;
}

.carousel-indicators .active {
    background: red;
}

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.

<!-- indx.html-->
<footer id="contact">
    <div class="py-5 bg-light">
        <div class="container">
            <div class="row d-flex  justify-content-around">
                <div class="col-lg-4 mb-4">
                    <ul class="contact-info list-unstyled">
                        <li><span><i class="fas fa-phone text-danger"></i></span><strong> Call Us Today!</strong></li>
                        <li><a href="tel:123456789" class="ml-3 text-dark"> +00 123 456 789</a></li>
                        <br/>
                        <li><span><i class="fas fa-map-marker-alt text-danger"></i></span> 123, New Lenox</li>
                        <li><a href="tel:123456789" class="text-dark ml-3"> Chicago, IL 60606</a></li>
                    </ul>
                    <p class="text-muted ml-3">Laborum aute enim consectetur</p>
                </div>
                <div class="col-lg-4 col-md-4">
                    <h5>Pages</h5>
                    <ul class="links list-unstyled">
                        <li> <a href="#" class="text-muted">Home</a></li>
                        <li> <a href="#" class="text-muted">About</a></li>
                        <li> <a href="#" class="text-muted">Instructors</a></li>
                        <li> <a href="#" class="text-muted">Contact</a></li>
                    </ul>
                </div>
                <div class="col-lg-4 col-md-4">
                    <h5>Favorites</h5>
                    <ul class="links list-unstyled">
                        <li> <a href="#" class="text-muted">Minim labore nulla</a></li>
                        <li> <a href="#" class="text-muted">Nulla qui nisi</a></li>
                        <li> <a href="#" class="text-muted">Iris Vor Arnim</a></li>
                        <li> <a href="#" class="text-muted">Consectetur cupidatat</a></li>
                    </ul>
                </div>
            </div>
            <div class="d-flex justify-content-center">
                <a href="#" class=""><i class="fab fa-facebook-square text-danger mr-3 fontSocial"></i></a>
                <a href="#" class=""><i class="fab fa-twitter-square text-danger fontSocial mr-3"></i></a>
                <a href="#" class=""><i class="fab fa-github-square text-danger fontSocial"></i></a>
            </div>
        </div>
    </div>
    <div class="py-3 bg-dark text-white">
        <div class=" text-center">
            <p>&copy; 2019 Your company. All rights reserved. </p>
        </div>
    </div>
</footer>

/* contact styles */

.fontSocial {
    font-size: 32px;
}

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:

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

//scroll to top of page on page refresh
$(window).on('beforeunload', function() {
    $(window).scrollTop(0);
});

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.

//Bouncing downward arrow click functionality
$(document).ready(function() {
    $('#down').on('click', function() {
        $('html, body').animate({
            scrollTop: $('#about').offset().top
        }, 1000);
    });
});

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!

Project Structure

Adding Bootstrap to Our Project

1. Navbar:

2. Hero:

Classes Used:

3. About:

Classes Used:

4. Instructor:

Classes Used:

5. Testimonials:

Classes Used:

6. Footer:

Classes Used:

Related Posts