Product landing page template Bootstrap

How to create a simple responsive product landing page template using HTML CSS and Bootstrap.

Final output:

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Order Now

Best Selling

Aliquam gravida nisl a suscipit condimentum

product landing page html css bootstrap image 1

Strawberry Donut

$2.00

product landing page html css bootstrap image 2

Chocolate Donut

$2.00

product landing page html css bootstrap image 3

Sprinkes Donut

$2.00

All Donuts

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam gravida, nisl a suscipit condimentum, justo ligula vehicula metus, eget consectetur ante ex a dui. Donec in nisl elementum, auctor velit ut, feugiat felis. Etiam leo nisl, ultrices sit amet tincidunt in, pharetra convallis tellus.

Know More

Lorem Ipsum

landing page html css bootstrap free product gallery image 1

landing page html css bootstrap free product gallery image 2

landing page html css bootstrap free product gallery image 3

landing page html css bootstrap free product gallery image 4

landing page html css bootstrap free product gallery image 5

landing page html css bootstrap free product gallery image 6

Join Our Mailing List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nisl elementum, auctor velit ut, feugiat felis.

1. Create an HTML and a CSS page. Add Bootstrap’s CSS and JS to the HTML file. Also, add the Bootstrap icons link. Link your CSS file.

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>

2. Add the Bootstrap container. We’ll be adding all the sections of the landing page inside it.

Place the navigation bar inside it. Place your logo in the center of the Bootstrap navbar. Here’s the detailed explanation for reference: Bootstrap Navbar With Logo Center.

<div class="container">
    <nav class="navbar navbar-expand-md fixed-top">
        <div class="container">
            <a class="navbar-brand fw-bold d-md-none" href="#">
                Yummy Donuts
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto align-items-center">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#best-selling">Best Selling</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about-us">About Us</a>
                    </li>
                    <a class="navbar-brand fw-bold d-none d-md-block" href="#">
                        Yummy Donuts
                    </a>
                    <li class="nav-item">
                        <a class="nav-link" href="#gallery">Gallery</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

Navbar and container styling:

.navbar {
  background-color: #ffffff;
}
.navbar .navbar-nav .nav-link {
  color: #000000;
}
@media screen and (min-width: 768px) {
  .navbar-brand {
    margin-right: 0;
    padding: 0 1.5rem;
  }
}
@media screen and (min-width: 1200px) {
  .navbar .navbar-nav .nav-link {
    padding: 0.5rem 2rem;
  }
  .container {
    width: 80%;
  }
}

Output:

3. Next will be the hero section.

Add a section with your hero image, and a div with a headline and the CTA button.

References:

text-center: center align text

img-fluid: responsive image

rounded-0: border-radius zero

Padding classe s:

py-3: top and bottom padding

px-3: Left and right padding

<section class="hero text-center">
    <img src="..." class="img-fluid" alt="">
    <div>
        <h2 class="py-3">Lorem ipsum dolor sit amet consectetur adipiscing elit.</h2>
        <a href="#" class="btn btn-dark rounded-0 px-3 py-2">Order Now</a>
    </div>
</section>

Output:

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Order Now

4. We’ll use absolute positioning to place the headline and CTA on top of the hero image. Set the parent position to relative. Center align it vertically and horizontally by setting the top to 50%, left and right to 0.

This will position the edge of the div to the center. So translate it vertically to -50%.

Reference: Center align using Bootstrap position classes.

<section class="hero text-center position-relative">
    <img src="..." class="img-fluid" alt="">
    <div class="position-absolute top-50 start-0 end-0 translate-middle-y">
        <h2 class="py-3">Lorem ipsum dolor sit amet consectetur adipiscing elit.</h2>
        <a href="#" class="btn btn-dark rounded-0 px-3 py-2">Order Now</a>
    </div>
</section>

Let’s split the text into two lines. Reduce the width only for large screens.

@media screen and (min-width: 768px) {
  .hero div {
    width: 50%;
  }
}

To center align it, use class mx-au to.

<div class="position-absolute top-50 start-0 end-0 translate-middle-y mx-auto">

Output:

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Order Now

5. Now, some best-selling products. Add a section with an id that is used in the navbar. Add a title and subtitle inside it.

<section class="text-center py-5" id="best-selling">
    <h2 class="fw-bold">Best Selling</h2>
    <p>Aliquam gravida nisl a suscipit condimentum</p>
</section>

Create a row with three columns inside the section. Add product image, product title, and price.

<div class="row">
    <div class="col-sm-4">
        <img src="..." class="img-fluid" alt="">
        <h3>Strawberry Donut</h3>
        <p>$2.00</p>
    </div>
    <div class="col-sm-4">
        <img src="..." class="img-fluid" alt="">
        <h3>Chocolate Donut</h3>
        <p>$2.00</p>
    </div>
    <div class="col-sm-4">
        <img src="..." class="img-fluid" alt="">
        <h3>Sprinkes Donut</h3>
        <p>$2.00</p>
    </div>
</div>

Add a link for more products below the row.

<a href="#" class="btn btn-outline-dark rounded-0 px-3 py-2 btn-lg mt-3">All Donuts</a>

Output:

Best Selling

Aliquam gravida nisl a suscipit condimentum

Strawberry Donut

$2.00

Chocolate Donut

$2.00

Sprinkes Donut

$2.00

All Donuts

6. Create a simple About section.

Reference: bg-danger-subtle

<section class="text-center bg-danger-subtle" id="about-us">
    <div class="about-us py-5 px-4 mx-auto">
        <h2 class="fw-bold">About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam gravida, nisl a suscipit
            condimentum, justo ligula vehicula metus, eget consectetur ante ex a dui. Donec in nisl
            elementum,
            auctor velit ut, feugiat felis. Etiam leo nisl, ultrices sit amet tincidunt in, pharetra
            convallis
            tellus.</p>
        <a href="#" class="btn btn-dark rounded-0 px-3 py-2 mt-3">Know More</a>
    </div>
</section>

Reduce the width on larger screens.

@media screen and (min-width: 768px) {
  .about-us {
    width: 50%;
  }
}

Output:

About Us

Know More

6. Let’s add a product gallery. Create a new section and add a title.

Use Bootstrap’s row columns. Add your product images inside the columns.

Reference:

row-cols-2: Display two columns on small screens

row-cols-sm-3: Display three columns on small screens

g-2: Set row gutter to two

<section class="text-center py-5" id="gallery">
    <h2 class="fw-bold">Lorem Ipsum</h2>
    <div class="row row-cols-2 row-cols-sm-3 g-2 pt-4">
        <div class="col">
            <img src="..." class="img-fluid" alt="">
        </div>
        <div class="col">
            <img src="..." class="img-fluid" alt="">
        </div>
        <div class="col">
            <img src="..." class="img-fluid" alt="">
        </div>
        <div class="col">
            <img src="..." class="img-fluid" alt="">
        </div>
        <div class="col">
            <img src="..." class="img-fluid" alt="">
        </div>
        <div class="col">
            <img src="..." class="img-fluid" alt="">
        </div>
    </div>
</section>

Output:

Lorem Ipsum

7. Lastly, add a footer to our landing page. Create another section with a div for the contact details.

<section class="text-center bg-light py-5" id="contact">
    <div class="contact mx-auto">
        <h2 class="text-uppercase fw-bold">Join Our Mailing List</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nisl
            elementum,
            auctor velit ut, feugiat felis.</p>
    </div>
</section>

Use an input group for newsletter signup. Add a Bootstrap icon inside the button.

<div class="input-group input-group-lg mx-auto my-5 w-75">
    <input type="text" class="form-control rounded-0 shadow-none" placeholder="Email Address" aria-label="Email Address"
        aria-describedby="subscribe">
    <button class="btn btn-dark rounded-0" type="button" id="subscribe"><i class="bi bi-send-fill"></i></button>
</div>

Add your social media icons. Use fs-4 to increase the icon size.

<div class="social-media mb-3">
    <a href="#" class="fs-4 px-3"><i class="bi bi-facebook text-dark"></i></a>
    <a href="#" class="fs-4 px-3"><i class="bi bi-twitter text-dark"></i></a>
    <a href="#" class="fs-4 px-3"><i class="bi bi-youtube text-dark"></i></a>
    <a href="#" class="fs-4 px-3"><i class="bi bi-instagram text-dark"></i></a>
    <a href="#" class="fs-4 px-3"><i class="bi bi-pinterest text-dark"></i></a>
</div>

Place a small copyright line at the very bottom.

<small>Copyright © Yummy Donuts 2023.</small>

Reduce the width of the contact section and our wrapper container for large devices.

@media screen and (min-width: 768px) {
  .contact {
    max-width: 50%;
  }
}

Output:

Join Our Mailing List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nisl elementum, auctor velit ut, feugiat felis.

Final Output Code for Responsive Product Website Landing Page using HTML CSS Bootstrap 5:

HTML

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="container">
        <nav class="navbar navbar-expand-md fixed-top">
            <div class="container">
                <a class="navbar-brand fw-bold d-md-none" href="#">
                    Yummy Donuts
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav mx-auto align-items-center">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#best-selling">Best Selling</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#about-us">About Us</a>
                        </li>
                        <a class="navbar-brand fw-bold d-none d-md-block" href="#">
                            Yummy Donuts
                        </a>
                        <li class="nav-item">
                            <a class="nav-link" href="#gallery">Gallery</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <section class="hero text-center position-relative">
            <img src="..." class="img-fluid" alt="">
            <div class="position-absolute top-50 start-0 end-0 translate-middle-y mx-auto">
                <h2 class="py-3">Lorem ipsum dolor sit amet consectetur adipiscing elit.</h2>
                <a href="#" class="btn btn-dark rounded-0 px-3 py-2">Order Now</a>
            </div>
        </section>
        <section class="text-center py-5" id="best-selling">
            <h2 class="fw-bold">Best Selling</h2>
            <p>Aliquam gravida nisl a suscipit condimentum</p>
            <div class="row">
                <div class="col-sm-4">
                    <img src="..." class="img-fluid" alt="">
                    <h3>Strawberry Donut</h3>
                    <p>$2.00</p>
                </div>
                <div class="col-sm-4">
                    <img src="..." class="img-fluid" alt="">
                    <h3>Chocolate Donut</h3>
                    <p>$2.00</p>
                </div>
                <div class="col-sm-4">
                    <img src="..." class="img-fluid" alt="">
                    <h3>Sprinkes Donut</h3>
                    <p>$2.00</p>
                </div>
            </div>
            <a href="#" class="btn btn-outline-dark rounded-0 px-3 py-2 btn-lg mt-3">All Donuts</a>
        </section>
        <section class="text-center bg-danger-subtle" id="about-us">
            <div class="about-us py-5 px-4 mx-auto">
                <h2 class="fw-bold">About Us</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam gravida, nisl a suscipit
                    condimentum, justo ligula vehicula metus, eget consectetur ante ex a dui. Donec in nisl
                    elementum,
                    auctor velit ut, feugiat felis. Etiam leo nisl, ultrices sit amet tincidunt in, pharetra
                    convallis
                    tellus.</p>
                <a href="#" class="btn btn-dark rounded-0 px-3 py-2 mt-3">Know More</a>
            </div>
        </section>
        <section class="text-center py-5" id="gallery">
            <h2 class="fw-bold">Lorem Ipsum</h2>
            <div class="row row-cols-2 row-cols-sm-3 g-2 pt-4">
                <div class="col">
                    <img src="..." class="img-fluid" alt="">
                </div>
                <div class="col">
                    <img src="..." class="img-fluid" alt="">
                </div>
                <div class="col">
                    <img src="..." class="img-fluid" alt="">
                </div>
                <div class="col">
                    <img src="..." class="img-fluid" alt="">
                </div>
                <div class="col">
                    <img src="..." class="img-fluid" alt="">
                </div>
                <div class="col">
                    <img src="..." class="img-fluid" alt="">
                </div>
            </div>
        </section>
        <section class="text-center bg-light py-5" id="contact">
            <div class="contact mx-auto">
                <h2 class="text-uppercase fw-bold">Join Our Mailing List</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nisl
                    elementum,
                    auctor velit ut, feugiat felis.</p>
                <div class="input-group input-group-lg mx-auto my-5 w-75">
                    <input type="text" class="form-control rounded-0 shadow-none" placeholder="Email Address"
                        aria-label="Email Address" aria-describedby="subscribe">
                    <button class="btn btn-dark rounded-0" type="button" id="subscribe"><i
                            class="bi bi-send-fill"></i></button>
                </div>
                <div class="social-media mb-3">
                    <a href="#" class="fs-4 px-3"><i class="bi bi-facebook text-dark"></i></a>
                    <a href="#" class="fs-4 px-3"><i class="bi bi-twitter text-dark"></i></a>
                    <a href="#" class="fs-4 px-3"><i class="bi bi-youtube text-dark"></i></a>
                    <a href="#" class="fs-4 px-3"><i class="bi bi-instagram text-dark"></i></a>
                    <a href="#" class="fs-4 px-3"><i class="bi bi-pinterest text-dark"></i></a>
                </div>
                <small>Copyright © Yummy Donuts 2023.</small>
            </div>
        </section>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
        crossorigin="anonymous"></script>
</body>

</html>

CSS

.navbar {
  background-color: #ffffff;
}
.navbar .navbar-nav .nav-link {
  color: #000000;
  font-size: 1.1rem;
}
@media screen and (min-width: 768px) {
  .navbar-brand {
    margin-right: 0;
    padding: 0 3rem;
  }
  .hero div {
    width: 50%;
  }
  .about-us {
    width: 50%;
  }
  .contact {
    max-width: 50%;
  }
}
@media screen and (min-width: 1200px) {
  .navbar .navbar-nav .nav-link {
    padding: 0.5rem 2rem;
  }
  .container {
    width: 80%;
  }
}

Video tutorial for Product Landing Page HTML CSS Bootstrap 5:

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.

Product Website Landing Page HTML CSS Bootstrap 5

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Best Selling

Strawberry Donut

Chocolate Donut

Sprinkes Donut

About Us

Lorem Ipsum

Join Our Mailing List

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Lorem ipsum dolor sit amet consectetur adipiscing elit.

Best Selling

Strawberry Donut

Chocolate Donut

Sprinkes Donut

About Us

Lorem Ipsum

Join Our Mailing List

Final Output Code for Responsive Product Website Landing Page using HTML CSS Bootstrap 5:

Video tutorial for Product Landing Page HTML CSS Bootstrap 5:

Recently added:

Website Landing Page using HTML CSS Bootstrap 5 #3

Simple Bootstrap 5 Card Design

Bootstrap card design with hover effect

Similar Posts

Website Landing Page using HTML CSS Bootstrap 5 #3

How to create Portfolio Website HTML CSS Bootstrap 5