How to Make a SaaS Homepage using Bootstrap

April 13, 2021, 10:50 a.m.
Bootstrap SaaS · 37 min read
How to Make a SaaS Homepage using Bootstrap

You have a software product and you want to make a website for it. The conventional wisdom would be to hire a web developer. However, if you want to save money, and have more control over the outcome of the project, you can also build your own site. 

Building a website is not an easy task for a SaaS, startup, and entrepreneur. However, there are plenty of tools out there that will come to your aid. One of them is Bootstrap, which makes it even easier for you to create a website that looks great on any device. In this guide, I will show you how to make a simple and effective SaaS homepage of your choice using Bootstrap.

 

What is a SaaS?

SaaS, or software as a service, can be a very profitable model for tech-based businesses. The idea is that you can offer your product as a monthly subscription and generate recurring income. A well-designed SaaS landing page will do a great job of converting potential users into actual paying customers. But first, you need to design the landing page itself.

 

What is the most important part of a SaaS?

The most important part of any SaaS product is your landing/home page. This is where you make an impression on your potential customers. If you're already working on a limited budget, and cannot afford a designer's services, you can still create a beautiful and effective home page using free, customizable Bootstrap templates.

 

What is Bootstrap?

Bootstrap 5

Bootstrap is one of the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first projects on the web. To be specific, it’s a free collection of tools for building mobile-first websites that are responsive across various screen sizes. It is free to download and licensed under MIT. Bootstrap is developed by a community of passionate developers with the aim of solving common problems encountered in web development.

It is used by a number of different professionals from all over the world and has several great features, which makes it a perfect tool for creating a SaaS product.

 

Create an HTML file

home.html

<!DOCTYPE html>
<html lang="en">

<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">
  <title>SaaS</title>
</head>

<body>



</body>

</html>

First, you need a text editor such as Sublime to create an HTML file. 

Sublime is a free text editor for programming and markup languages such as HTML. 

Next, you need to add the DOCTYPE, html, head, and body elements.

If you are completely new to coding, see the HTML and CSS course to get your foot in the door. 

 

Add Bootstrap to your HTML

home.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <title>SaaS</title>
  </head>
  <body>


      
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Next, add the Bootstrap CDN to get started quickly. It is also available as a download.

 

 

SaaS call to actions

What is a call to action?

The call to action or CTA is a phrase meant to prompt an immediate response from the user by telling them what action to take and how. 

In marketing terms, the first call to action is placed above-the-fold, or in this case above the page scroll, to increase the visibility of the CTA and incentivize motivated users to act immediately on the offer. 

 

What is an example of a call to action?

More often than not, a CTA asks the user to "Sign up", "Get started", "Subscribe", "Try for free", or "Learn more". 

Choosing the correct CTA is depended on the product being sold.

 

What is a good SaaS call to action?

A good call to action answers three questions:

1. What is the product?

2. Why do they need it?

3. How do they get it?

These three parts are often broken divided into a header, subheader, and button that work in unison to convince the user to act.

Below are two examples of a CTA with HTML code.

 

Bootstrap CTA and Navigation Bar Template #1

In browser

SaaS Bootstrap CTA

 

HTML code

<style>
.banner {
    /* The image used */
    background-image:
    /*linear gradient overlay*/
    linear-gradient(to top right, rgba(13,110,253, 0.30) 10%, rgba(0,0,0, 0.20 ) 60%),
    url("mountains.jpg");
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    /* Prevent image from repeating */
    background-repeat: no-repeat;
    /* Set height */
    height: auto;
    /* Set background size */
    background-size:cover;
    /* Set background position */
    background-position:right center
  }
</style>


<div class="banner">
  <!--Navbar-->
  <nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">hikeGPS</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/#services">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
         <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Resources
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Guides</a></li>
            <li><a class="dropdown-item" href="#">Blog</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Share your experience</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-light" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<!--CTA-->
  <div class="container text-center text-white">
    <br><br><br><br><br><br>
    <h1 class="display-4">Start Hiking Today.</h1>
    <h5>Use GPS to sure you know where you're going.</h5>
    <br>
    <a class="btn btn-primary btn-lg" href="#" role="button">Try for Free</a>
    <br><br><br><br><br><br>
  </div>
</div>

Here is a CTA overlayed on an image, or hero banner.

The text is vertically and horizontally centered across an image of some mountains, visually demonstrating the product has something to do with nature. 

When the user then reads the CTA they understand:

1. What is the product? - A wifi-free GPS

2. Why do they need it? - So they can hike confidently because they know where they're going

3. How do they get it? By clicking the button for a free trial

 

Bootstrap CTA and Navigation Bar Template #2

In browser

Bootstrap cta and navbar

 

HTML code

<style>
    .display-3{
      font-weight:700;
    }

    .purple{
      color:rgb(108,99,255);
    }
    .btn{
      border-radius:30px
    }
</style>

  <!--Navbar-->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Pets-R-us</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/#services">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
         <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Resources
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Insurances</a></li>
            <li><a class="dropdown-item" href="#">Blog</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Share your experience</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link</a>
        </li>
      </ul>
      <div class="d-flex">
        <button class="btn btn-outline-light" type="submit">Start</button>
      </div>
    </div>
  </div>
</nav>

<!--CTA-->
  <div class="container py-5 text-right text-dark">
    <div class="row p-5">
      <div class="col-lg-6 col-md-12 my-auto">
        <h1 class="display-3">Manage your Clients with ease</h1>
        <h5 class="purple">Pet daycare management software for easy booking and client management.</h5>
        <br>
        <a class="btn btn-dark btn-lg" href="#" role="button">Get A Quote</a>
      </div>
      <div class="col-lg-6 col-md-12">
        <img src="{% static 'Group 73.png' %}" class="img-fluid" alt="couple holding thier cat">
      </div>
    </div>
  </div>
</div>

Here's another example of a CTA but with columns rather than a hero banner. The image on the right drops below the text in smaller devices.

This CTA is laid out as follows:

1. What is the product? - Software for dog daycare

2. Why do they need it? - To manage booking and clients easier

3. How do they get it? - By clicking the quote button

The image was created by rounding the corners of a square image then customizing an Adobe XD SVG to overlay on top. 

 

SaaS Value Propositions

What is a value proposition?

A value proposition is another marketing term used to describe the value a company promises to deliver to the user.

Value propositions and CTAs are closely connected. Oftentimes the CTA includes the value proposition because they describe why the user needs your service.

 

What is an example of a value proposition?

A value proposition makes the benefits of the product clear to the potential customer. Examples of value propositions include your service being faster, easier to use, and of more use than your competitor's product.

Start by comparing your SaaS to the nearest competitor, identifying your competition's value versus your own. Then condense these insights into easy-to-digest phrases and sentences. 

 

What is a good SaaS value proposition?

A good value proposition details why your product is of more value to the user than similar products offered by your competition. 

Keep in mind these 3 questions when writing your value proposition: 

1. How the value is delivered?

2. How the value is experienced?

3. How the value is acquired?

 

Bootstrap Value Proposition Template #1

In browser

Bootstrap SaaS value propositon

 

HTML code

<style>
 /*background circle for icons*/
    .numberCircle {
      border-radius: 50%;
      width: 60px;
      height: 60px;
      padding: 8px;
      background:rgb(13,110,253, 0.10);
      border: none;
      color: #007bff;
      text-align: center;
      font-size: 25px;
    }

    p{
      line-height: 25px;
    }

    /*customize cards*/
    .card{
      border:none;
    }

    .card:hover {
      box-shadow: 0 40px 60px -20px rgb(27,24,15, 0.15);
        }
</style>


<!--Value Proposition-->
<div class="container p-5">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-3 pb-4">
      <a href="/" style="text-decoration: none">
        <div class="card h-100 text-dark">
          <div class="card-body">
            <div class="numberCircle my-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
                <path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
                <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
              </svg>
            </div>
            <h5 class="card-title">Mobile App</h5>
            <p class="card-text">Download the mobile app for free on any app store.</p>
          </div>
        </div>
      </a>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3 pb-4">
      <a href="/" style="text-decoration: none">
        <div class="card h-100 text-dark">
          <div class="card-body">
            <div class="numberCircle my-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-wifi-off" viewBox="0 0 16 16">
                <path d="M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z"/>
              </svg>
            </div>
            <h5 class="card-title">No wifi-needed</h5>
            <p class="card-text">Wifi is not needed to use the app because we know its not always available.</p>
          </div>
        </div>
      </a>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3 pb-4">
      <a href="/" style="text-decoration: none">
        <div class="card h-100 text-dark">
          <div class="card-body">
            <div class="numberCircle my-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-compass" viewBox="0 0 16 16">
                <path d="M8 16.016a7.5 7.5 0 0 0 1.962-14.74A1 1 0 0 0 9 0H7a1 1 0 0 0-.962 1.276A7.5 7.5 0 0 0 8 16.016zm6.5-7.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
                <path d="m6.94 7.44 4.95-2.83-2.83 4.95-4.949 2.83 2.828-4.95z"/>
              </svg>
            </div>
            <h5 class="card-title">Accurate mapping</h5>
            <p class="card-text">Get the most up-to-date mapping and report any inconsistencies to help others.</p>
          </div>
        </div>
      </a>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3 pb-4">
      <a href="/" style="text-decoration: none">
        <div class="card h-100 text-dark">
          <div class="card-body">
            <div class="numberCircle my-3">
             <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-stopwatch" viewBox="0 0 16 16">
              <path d="M8.5 5.6a.5.5 0 1 0-1 0v2.9h-3a.5.5 0 0 0 0 1H8a.5.5 0 0 0 .5-.5V5.6z"/>
              <path d="M6.5 1A.5.5 0 0 1 7 .5h2a.5.5 0 0 1 0 1v.57c1.36.196 2.594.78 3.584 1.64a.715.715 0 0 1 .012-.013l.354-.354-.354-.353a.5.5 0 0 1 .707-.708l1.414 1.415a.5.5 0 1 1-.707.707l-.353-.354-.354.354a.512.512 0 0 1-.013.012A7 7 0 1 1 7 2.071V1.5a.5.5 0 0 1-.5-.5zM8 3a6 6 0 1 0 .001 12A6 6 0 0 0 8 3z"/>
            </svg>
          </div>
          <h5 class="card-title">Hike estimates</h5>
          <p class="card-text">We track steps not location, so you can always get an estimate of the distance traveled.</p>
        </div>
      </div>
    </a>
  </div>
</div>
</div>

Besides the CTA, one of the best ways to present your value proposition feature cards. The SVG icons used are free at icons.getbootstrap.com.

 

Bootstrap Value Proposition Template #2

In browser

Bootstrap columns

 

HTML code

<!--Value Proposition-->
 <div class="container-fluid py-5 bg-light">
    <div class="container p-5">
      <div class="row">
        <div class="col-lg-6 col-md-12">
          <img src="{% static 'Group 75.png' %}" class="img-fluid" style="height:380px" alt="couple with dog">
        </div>
        <div class="col-lg-6 col-md-12 my-auto">
          <h2 class="font-weight-bold text-center">Organize, manage, and track in one app</h2>
          <h5 class="text-muted text-center lead">No need for separate spreadsheets and calenders. Use the all-in-one Pets-R-us app.</h5>
          <ul class="text-right">
              <li>Clean interface</li>
              <li>Upload contact information, behavioral, and grooming information</li>
              <li>No client limit</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

Another way to list off your value propositions as bullet points. 

 

Bootstrap SaaS Testimonials

What is a testimonial?

A testimonial is a spoken or written statement endorsing the use of the product. Testimonials are given by customers who have personal experience with the product and feel comfortable sharing this experience with others.

Reach out to your existing customers with an email asking for a short testimonial for your website. Let them know you'll provide a backlink to their site as thanks for their time. But don't push too much for the testimonial, if they feel comfortable they will be more than willing to send in their review.

 

What is an example of a testimonial?

"I increased my sales by 10% using this product! Thanks to the IT team for being easy to work with and competent" is an example of a testimonial that restates the value of the product while also giving positive feedback and thanks to the employees.

Testimonials should be honest and authentic. They don't need to be good copy.

 

What is a good SaaS testimonial?

A good testimonial should help increase conversion rates using the bandwagon effect. Potential clients feel comfortable signing up for the product based on the explicit statement that others are using the product effectively.

A good testimonial needs to highlight the existing trust between a current client and the product in a concise statement that appeals to reason and emotion.

Part of that trust includes the customer's willingness to have their name, title, company/website, and even picture displayed next to their statement.

Keep in mind these 3 questions when selecting a testimonial for your site: 

1. Does it provide qualitative evidence (emotional appeal)?

2. Does it provide quantitative evidence (data & statistics)?

3. Does it highlight a specific use case for the product?

 

Bootstrap SaaS #1 Testimonials

In browser

Bootstrap testimonials

 

HTML code

<style>
/*client images */
    .client {
      height:100px; 
      width:100px; 
      border-radius: 50%; 
      object-fit:cover;
    }

    /*stars color */
    .bi-star, .bi-star-fill, .bi-star-half{
      color:#ffc107;
    }
</style>

<!--Testimonials-->
<!--Testimonials-->
 <div class="my-5">
 <div class="container p-5">
    <h1>What do our clients say?</h1>
  <div class="row p-5">
    <div class="col-lg-6 col-md-12">
      <div class="row">
        <div class="col-3 text-center my-auto">
          <img src="john.jpg" class="img-fluid client"> 
        </div>
        <div class="col-9">
      <figure>
        <blockquote class="blockquote">
          <p>It never freezes and always provides the most up-to-date routes. I've been able to avoid several dangerous routes because of it.</p>
        </blockquote>
        <figcaption class="blockquote-footer">
          Jake P. <cite title="Source Title">hiked Great Smokey Mountains</cite>
        </figcaption>
      </figure>
  
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
      </svg>
    </div>
      </div>
  </div>
    <div class="col-lg-6 col-md-12">
      <div class="row">
        <div class="col-3 text-center my-auto">
          <img src="sophie.jpg" class="img-fluid client"> 
        </div>
        <div class="col-9">
      <figure>
        <blockquote class="blockquote">
          <p>Great product! Gives me piece of mind that I can hike without getting lost. I've been able to hike 5 new trails I was unsure of because of it.</p>
        </blockquote>
        <figcaption class="blockquote-footer">
          Sophie G. <cite title="Source Title">hiked Zion National Park</cite>
        </figcaption>
      </figure>
  
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
        <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
      </svg>
    </div>
      </div>
  </div>
  </div>
</div>
</div>

Testimonials are most credible when you can provide the name, face, and company associated with each.

 

Bootstrap Testimonial Template #2

In browser

Bootstrap testimonials

 

HTML code

<style>
   /*client images */
    .client {
      height:60px; 
      width:60px; 
      border-radius: 50%; 
      object-fit:cover;
    }

    /*quote svgs*/
    .bi-chat-square-quote{
      color:rgb(108,99,255, 0.3);
    }

    /*stars color */
    .bi-star, .bi-star-fill, .bi-star-half{
      color:#ffc107;
    }
</style>



  <!--Testimonials-->
  <div class="container p-5">
    <div class="row p-5">
      <div class="col-lg-6 col-md-12">
        <svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" fill="currentColor" class="my-3 bi bi-chat-square-quote" viewBox="0 0 16 16">
          <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
          <path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/>
        </svg>
        <h3 class="pb-3">Saves so much time!</h3>  
        <figure>
          <blockquote class="blockquote">
            <p>Great product. Love the easy-to-use interface. Saves my employees at least 2 hours by not having to constantly check up with one another and reference a spreadsheet.</p>
          </blockquote>
          <div class="row">
            <div class="col-lg-2 col-md-3 my-auto">
             <img src='john.jpg' class="img-fluid client"> 
           </div>
           <div class="col-lg-10 col-md-9 my-auto">
            <b>John Smith</b>
            <br><small>Founder, Clean Paws</small><br>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
              <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
            </svg>
          </div>
        </div>      
      </figure>
    </div>
    <div class="col-lg-6 col-md-12">
      <svg xmlns="http://www.w3.org/2000/svg" width="3em" height="3em" fill="currentColor" class="my-3 bi bi-chat-square-quote" viewBox="0 0 16 16">
        <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
        <path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/>
      </svg>
      <h3 class="pb-3">Would recommend</h3>  
      <figure>
        <blockquote class="blockquote">
          <p>I never need to worry about relaying special care instructions or freeing schedules. Everything is done instantly through the app.</p>
        </blockquote>
        <div class="row">
          <div class="col-lg-2 col-md-3 my-auto">
           <img src="karen.jpg" class="img-fluid client"> 
         </div>
         <div class="col-lg-10 col-md-9 my-auto">
          <b>Karen Adams</b>
          <br><small>Owner, Cat Cafe</small><br>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
            <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
          </svg>
        </div>
      </div>      
    </figure>
  </div>
</div>
</div>

A good testimonial has the customer's name and image in addition to their job title and company, if applicable. 

The example above can easily be adapted to display the clients' job title and company.

 

 

Bootstrap SaaS pricing table

What is a pricing table?

A pricing table is an HTML element that lists the features available at different price points. It's meant to make easy as possible for the potential client to compare plans and select the one that's best for their needs.  

 

What is an example of a pricing table?

Pricing tables detail the price, features, and sign-up for each plan or subscription.

The table columns indicate the number of plans while the rows organize the features.

On average, 1-5 plans are listed on a pricing table. Add the number of columns/plans that fit your SaaS business model.  

 

What is a good SaaS pricing table?

A good pricing table doesn't overwhelm the potential client. Rather it communicates the key differences between each plan using brief descriptions or bullet points. 

You want the user to easily scan the pricing table, identify the differences and make their choice all without having to scroll back and forth comparing options. 

Make the price and features the main focus. Then add a call-to-action sign-up button below.

 

Bootstrap Pricing Table Template #1

In browser

Bootstrap pricing table

 

HTML Code

<!--Pricing Table-->
 <div class="container-fluid">
    <div class="container p-5">
      <div class="row">
        <div class="col-lg-4 col-md-12 mb-4">
          <div class="card card1 h-100">
            <div class="card-body">
             
              <h5 class="card-title">Basic</h5>
              <small class='text-muted'>Individual</small>
              <br><br>
              <span class="h1 font-weight-bold text-primary">$8</span>/month
              <br><br>
              <ul>
                <li>2 trails a month</li>
                <li>Free app</li>
              </ul>
              <div class="d-grid my-3">
                <button class="btn btn-outline-primary btn-block">Select</button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 mb-4">
          <div class="card card2 h-100">
            <div class="card-body">
              <h5 class="card-title">Standard</h5>
              <small class='text-muted'>Small Business</small>
              <br><br>
              <span class="h1 font-weight-bold text-primary">$20</span>/month
              <br><br>
              <ul>
                <li>5 trails a month</li>
                <li>Free app</li>
              </ul>
               <div class="d-grid my-3">
                <button class="btn btn-outline-primary btn-block">Select</button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 mb-4">
          <div class="card card3 h-100">
            <div class="card-body">
              <h5 class="card-title">Premium</h5>
              <small class='text-muted'>Large Company</small>
              <br><br>
              <span class="h1 font-weight-bold text-primary">$40</span>/month
              <br><br>
              <ul>
                <li>Unlimited trails a month</li>
                <li>Free app</li>
              </ul>
              <div class="d-grid my-3">
                <button class="btn btn-outline-primary btn-block">Select</button>
              </div>
            </div>
          </div>
        </div>
      </div>    
    </div>

Sometimes a pricing table is less of a table and more of a collection of cards. This is the same card CSS used for the value proposition example. 

 

Bootstrap Pricing Table Template #2

In browser

Bootstrap pricing table

 

HTML Code

<style>
    .card {
      border:none;
    }

    .card:hover {
      box-shadow: 0 1rem 3rem rgba(0,0,0,.75) !important;
    }

    .card:hover .btn-outline-dark{
      color:white;
      background:#212529;
    }

    .card:hover .bg-light{
      color:white;
      background:#6C63FF !important;
    }
</style>



<!--Pricing Table-->
<!--Pricing Table-->
<div class="container p-5">
  <div class="row">
    <div class="col-lg-4 col-md-12 mb-4">
      <div class="card h-100 shadow-lg">
        <div class="card-header text-center p-3 bg-light">
          <h5 class="card-title">Basic</h5>
          <small>Individual</small>
          <br><br>
          <span class="h2">$100</span>/month
          <br><br>
        </div>
        <div class="card-body">
          <ul class="list-group list-group-flush">
            <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
              <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
            </svg> 1 employee account</li>
            <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
              <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
            </svg> Unlimited clients</li>
          </ul>
          <div class="card-body text-center">
            <button class="btn btn-outline-dark" style="border-radius:30px">Select</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-12 mb-4">
      <div class="card h-100 shadow">
        <div class="card-header text-center p-3 bg-light">
          <h5 class="card-title">Standard</h5>
          <small>Small Business</small>
          <br><br>
          <span class="h2">$200</span>/month 
          <br><br>
        </div>
        <div class="card-body">
          <ul class="list-group list-group-flush">
            <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
              <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
            </svg> 15 employee accounts</li>
            <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
              <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
            </svg> Unlimited clients</li>
          </ul>
          <div class="card-body text-center">
            <button class="btn btn-outline-dark" style="border-radius:30px">Select</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-12 mb-4">
      <div class="card h-100 shadow">
       <div class="card-header text-center p-3 bg-light">
        <h5 class="card-title">Premium</h5>
        <small>Large Companies</small>
        <br><br>
        <span class="h2">$1000</span>/month
        <br><br>
      </div>
      <div class="card-body">
        <ul class="list-group list-group-flush">
          <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
            <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
          </svg> Unlimited employee accounts</li>
          <li class="list-group-item"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
            <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
          </svg> Unlimited clients</li>
        </ul>
        <div class="card-body text-center">
          <button class="btn btn-outline-dark" style="border-radius:30px">Select</button>
        </div>
      </div>
    </div>
  </div>
</div>   
</div>   

Here is another example of a pricing table in cards. As you can see, it clearly lists the price and compares three features.

For more examples see 11 Bootstrap Pricing Table Examples.

 

 

Bootstrap Footer

What is a footer?

A footer is the last piece of a website that goes at the very bottom of every page. It's an HTML element that contains helpful links and resources for the users. 

It provides the links in the navbar while also including additional contact information that doesn't need to be navigated to right on the page load.

 

What is an example of a footer?

Footers contain links to cookie and privacy policies in addition to terms and conditions.

They also contain contact information such as email, telephone numbers, and street addresses. Essentially, any bit of information that needs to be accessed by the client should be in the footer.

These links are usually presented in columns for easy scanning. 

The footer should also contain the company's copyright, if applicable. 

 

What is a good footer?

A good footer is like the index of a book. It is a list of relevant links designed to help users find a needed resource quickly.

Some companies like to place their logo and mission statement in the footer as another helpful resource in addition to their social media.

 

Bootstrap Footer Template #1

In browserBootstrap footer

 

HTML code

<style>
    .footer-link{
      color:white;
      text-decoration: none
    }

    .footer-link:hover {
      color:white;
      text-decoration: underline;
    }
</style>

<div class="container-fluid banner mt-5 text-white text-center">
  <div class="container p-5">
    <div class="row">
      <div class="col-lg-6 col-md-12">
        <h5>Company</h5>
        <p><a href="/" class="footer-link">About</a></p>
        <p><a href="/" class="footer-link">Jobs</a></p>
        <p><a href="/" class="footer-link">Blog</a></p>
        <p><a href="/" class="footer-link">Case Studies</a></p>
      </div>
      <div class="col-lg-6 col-md-12">
        <h5>Resources</h5>
        <p><a href="/" class="footer-link">Contact</a></p>
        <p><a href="/" class="footer-link">Support</a></p>
        <p><a href="/" class="footer-link">Privacy & terms</a></p>
        <p><a href="/" class="footer-link">Cookie Policy</a></p>
        <p><a href="/" class="footer-link">Sitemap</a></p>
      </div>
    </div>

  <div class="container p-2">
    <p>© 2021 SAAS. All Rights Reserved.</p>
     <a href="/" class="footer-link">
          <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
            <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
          </svg></a>
          <a href="/" class="footer-link">
            <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
              <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
            </svg></a>
            <a href="/" class="footer-link">
              <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
              <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
          </svg>
        </a>
  </div>
</div>

Here is the same CTA background banner image used in the footer. The social media links are free Bootstrap icons. 

 

Bootstrap Footer Template #2

In browser

Bootstrap footer

 

HTML Code

<style>
    .footer{
      background: linear-gradient(to bottom left, #D2D0FF, #6C63FF);
    }

    .footer-link{
      color:white;
      text-decoration: none
    }

    .footer-link:hover {
      color:white;
      text-decoration: underline;
    }
</style>


<div class="container-fluid footer mt-5 text-white">
  <div class="container p-5">
    <div class="row">
      <div class="col-lg-4 col-md-12">  
        <h6>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
          </svg>
        Pets-R-us</h6>
        <p>Let us handle the software so you can handle the pets.</p>
        <a href="/" class="footer-link">
          <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
            <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
          </svg></a>
          <a href="/" class="footer-link">
            <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
              <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
            </svg></a>
            <a href="/" class="footer-link">
              <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
              <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
          </svg>
        </a>
      </div>
      <div class="col-lg-4 col-md-12">
        <h6>Company</h6>
        <p><a href="/" class="footer-link">About</a></p>
        <p><a href="/" class="footer-link">Jobs</a></p>
        <p><a href="/" class="footer-link">Blog</a></p>
        <p><a href="/" class="footer-link">Case Studies</a></p>
      </div>
      <div class="col-lg-4 col-md-12">
        <h6>Resources</h6>
        <p><a href="/" class="footer-link">Contact</a></p>
        <p><a href="/" class="footer-link">Support</a></p>
        <p><a href="/" class="footer-link">Privacy & terms</a></p>
        <p><a href="/" class="footer-link">Cookie Policy</a></p>
        <p><a href="/" class="footer-link">Sitemap</a></p>
      </div>
    </div>

  <div class="container p-2">
    <p class="text-center">© 2021 SAAS. All Rights Reserved.</p>
  </div>
</div>

Here is a footer with three columns and a linear gradient background. 

If you want more examples of Bootstrap footers visit, 18 Responsive Bootstrap Footer Examples.






Post a Comment
Join the community

0 Comments
3
Jaysha
Written By
Jaysha
Hello! I enjoy learning about new CSS frameworks, animation libraries, and SEO.