Open in app

Sign in

Write

Sign in

Bootstrap E Commerce Web User Interface

Gaya's techtips
7 min readJun 28, 2021

First of all we can go to the bootstrap get started page. On that page we can find startup code in html. We can copy and paste that code to our text editor. First of all we can remove comments.then we can change the title.

<!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.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Then we can add a header as a navigation bar. We can find various types of navigation bars. The following navigation bar is used by me.

<div class=”navbar navbar-expand-lg fixed-top navbar-dark bg-dark”>
 <div class=”container-fluid”>
 <a href=”#” aria-current=”page” class=”navbar-brand”>Best Seller</a>
 <button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#linksonnav” aria-controls=”linksonnav” aria-expanded=”false” aria-label=”Toggle navigation”>
 <span class=”navbar-toggler-icon”></span>
 </button>
 <div class=”collapse navbar-collapse” id=”linksonnav”>
 <div class=”navbar-nav”>
 <a href=”#” class=”nav-link”>Profile</a>
 <a href=”#” class=”nav-link”>Become Seller</a>
 <a href=”#” class=”nav-link”>Settings</a>
 </div>
 </div>
 </div>
 </div>

There are buttons to expand the navigation bar in a smaller size view.Im not going to explain about class names. Because if you develop your application with bootstrap you need to develop by interacting with website. Because you can do it the latest way with the latest release. That’s why I recommended that it works with website.

Then we can arrange this work with a container. It can allow us to use rows and columns in a grid system. If you test by coding this sample . you can better understand it.

We use carousel system to show advertisements or packages.here is good example to learn about carousel in bootstrap

<div id=”carouselExampleFade” class=”carousel slide carousel-dark” data-bs-ride=”carousel”>
 <div class=”carousel-inner”>
 <div class=”carousel-item active”>
 <img src=”pizza1.jpg” class=”d-block w-100" height=”500px” alt=”Pizza offer”>
 <div class=”carousel-caption d-none d-md-block”>
 <h4>New offer for Sausage Pizza </h4>
 <p style=”margin-bottom: 50px;”>you can enjoy 50% off offer for sausage pizza </p>
 </div>
 </div>
 <div class=”carousel-item”>
 <img src=”donut1.jpg” class=”d-block w-100" height=”500px” alt=”Donut Offer”>
 <div class=”carousel-caption d-none d-md-block”>
 <h4>New offer for dounut </h4>
 <p style=”margin-bottom: 50px;”>you can enjoy 5% off offer for dounut </p>
 </div>
 </div>
 <div class=”carousel-item”>
 <img src=”hotdog1.jpg” class=”d-block w-100" height=”500px” alt=”Hotdog offer”>
 <div class=”carousel-caption d-none d-md-block”>
 <h4>New offer for Hot dog</h4>
 <p style=”margin-bottom: 50px;”>you can enjoy 20% off offer for hot dog give away</p>
 </div>
 </div>
 </div>
 <button class=”carousel-control-prev” type=”button” data-bs-target=”#carouselExampleFade” data-bs-slide=”prev”>
 <span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
 <span class=”visually-hidden”>Previous</span>
 </button>
 <button class=”carousel-control-next” type=”button” data-bs-target=”#carouselExampleFade” data-bs-slide=”next”>
 <span class=”carousel-control-next-icon” aria-hidden=”true”></span>
 <span class=”visually-hidden”>Next</span>
 </button>
 </div>

Then I added items listing as a card.here is special ability ibn bootstrap that is if we added many more items in a single row it is automatically added to the next row. It is a good opportunity to make a much larger list with simple code.

Then i added footer and end this example

<! — Footer →
 <div class=”row”>
 <div class=”col” style=”background-color: #071d3d;padding:1rem;”>
 <div class=”card text-center” style=”background-color: #071d3d;padding:1rem;”>
 <div class=”flex “>
 <a href=”#” style=”text-decoration: none; padding:5px;color:#ffffff”>Contact Us</a>
 <a href=”#” style=”text-decoration: none; padding:5px;color:#ffffff”>About us</a>
 <a href=”#” style=”text-decoration: none; padding:5px;color:#ffffff”>Help</a>
 </div>
 </div>
 </div>
 </div>

Entire Code

<!doctype html>
<html lang=”en”><head>
 <meta charset=”utf-8">
 <meta name=”viewport” content=”width=device-width, initial-scale=1">
 <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel=”stylesheet” integrity=”sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=”anonymous”><title>Best Seller</title>
</head><body>
 <! — Navigation or header →
 <div class=”navbar navbar-expand-lg fixed-top navbar-dark bg-dark”>
 <div class=”container-fluid”>
 <a href=”#” aria-current=”page” class=”navbar-brand”>Best Seller</a>
 <button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-target=”#linksonnav” aria-controls=”linksonnav” aria-expanded=”false” aria-label=”Toggle navigation”>
 <span class=”navbar-toggler-icon”></span>
 </button>
 <div class=”collapse navbar-collapse” id=”linksonnav”>
 <div class=”navbar-nav”>
 <a href=”#” class=”nav-link”>Profile</a>
 <a href=”#” class=”nav-link”>Become Seller</a>
 <a href=”#” class=”nav-link”>Settings</a>
 </div>
 </div>
 </div>
 </div>
 <div class=”container-fluid” style=”margin-top: 60px;”>
 <! — contene →
 <div class=”row”>
 <div class=”col-12">
 <h4 style=”margin: 2rem;”>Today ‘s Special Offers</h4>
 </div>
 </div>
 <div class=”row”>
 <div class=”col-12">
 <div id=”carouselExampleFade” class=”carousel slide carousel-dark” data-bs-ride=”carousel”>
 <div class=”carousel-inner”>
 <div class=”carousel-item active”>
 <img src=”pizza1.jpg” class=”d-block w-100" height=”500px” alt=”Pizza offer”>
 <div class=”carousel-caption d-none d-md-block”>
 <h4>New offer for Sausage Pizza </h4>
 <p style=”margin-bottom: 50px;”>you can enjoy 50% off offer for sausage pizza </p>
 </div>
 </div>
 <div class=”carousel-item”>
 <img src=”donut1.jpg” class=”d-block w-100" height=”500px” alt=”Donut Offer”>
 <div class=”carousel-caption d-none d-md-block”>
 <h4>New offer for dounut </h4>
 <p style=”margin-bottom: 50px;”>you can enjoy 5% off offer for dounut </p>
 </div>
 </div>
 <div class=”carousel-item”>
 <img src=”hotdog1.jpg” class=”d-block w-100" height=”500px” alt=”Hotdog offer”>
 <div class=”carousel-caption d-none d-md-block”>
 <h4>New offer for Hot dog</h4>
 <p style=”margin-bottom: 50px;”>you can enjoy 20% off offer for hot dog give away</p>
 </div>
 </div>
 </div>
 <button class=”carousel-control-prev” type=”button” data-bs-target=”#carouselExampleFade” data-bs-slide=”prev”>
 <span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
 <span class=”visually-hidden”>Previous</span>
 </button>
 <button class=”carousel-control-next” type=”button” data-bs-target=”#carouselExampleFade” data-bs-slide=”next”>
 <span class=”carousel-control-next-icon” aria-hidden=”true”></span>
 <span class=”visually-hidden”>Next</span>
 </button>
 </div>
 </div>
 </div>
 <! — Packages →
 <! — Item List →
 <div class=”row”>
 <div class=”col-12">
 <h4 style=”margin: 2rem;”>All Items</h4>
 </div>
 </div>
 <div class=”row”>
 <div class=”col-12 col-md-4">
 <div class=”card”>
 <img src=”./pizza1.jpg” alt=”” class=”card-img-top”>
 <div class=”card-body”>
 <h5 class=”card-title”>Sausage Pizza</h5>
 <p class=”card-text”>This is very lowest cost effective pizza</p>
 <p class=”card-text” style=”font-weight: bold;font-size:16px”>Available : 12 </p>
 <p class=”card-text” style=”color:#7a7a7a”>$ 5.00</p>
 <a href=”#” class=”btn btn-warning”>Add to cart</a>
 </div>
 </div>
 </div>
 <div class=”col-12 col-md-4">
 <div class=”card”>
 <img src=”./pizza2.jpg” alt=”” class=”card-img-top”>
 <div class=”card-body”>
 <h5 class=”card-title”>Fried Chicken Pizza</h5>
 <p class=”card-text”>This is very greate Pizza</p>
 <p class=”card-text” style=”font-weight: bold;font-size:16px”>Available : 1 </p>
 <p class=”card-text” style=”color:#7a7a7a”>$ 15.00</p>
 <a href=”#” class=”btn btn-warning”>Add to cart</a>
 </div>
 </div>
 </div>
 <div class=”col-12 col-md-4">
 <div class=”card”>
 <img src=”./pizza3.jpg” alt=”” class=”card-img-top”>
 <div class=”card-body”>
 <h5 class=”card-title”>Seafood Pasta</h5>
 <p class=”card-text”>This is real Pasta From italy</p>
 <p class=”card-text” style=”font-weight: bold;font-size:16px”>Available : 100 </p>
 <p class=”card-text” style=”color:#7a7a7a”>$ 10.00</p>
 <a href=”#” class=”btn btn-warning”>Add to cart</a>
 </div>
 </div>
 </div>
 <div class=”col-12 col-md-4">
 <div class=”card”>
 <img src=”./pizza4.jpg” alt=”” class=”card-img-top”>
 <div class=”card-body”>
 <h5 class=”card-title”>Sausage & vege Pizza</h5>
 <p class=”card-text”>This is very sweet pizza</p>
 <p class=”card-text” style=”font-weight: bold;font-size:16px”>Available : 11 </p>
 <p class=”card-text” style=”color:#7a7a7a”>$ 8.00</p>
 <a href=”#” class=”btn btn-warning”>Add to cart</a>
 </div>
 </div>
 </div>
 <div class=”col-12 col-md-4">
 <div class=”card”>
 <img src=”./hotdog1.jpg” alt=”” class=”card-img-top”>
 <div class=”card-body”>
 <h5 class=”card-title”>Hot Hotdog</h5>
 <p class=”card-text”>This is Super Hot dog you ever eat</p>
 <p class=”card-text” style=”font-weight: bold;font-size:16px”>Available : 60 </p>
 <p class=”card-text” style=”color:#7a7a7a”>$ 9.00</p>
 <a href=”#” class=”btn btn-warning”>Add to cart</a>
 </div>
 </div>
 </div>
 <div class=”col-12 col-md-4">
 <div class=”card”>
 <img src=”./donut1.jpg” alt=”” class=”card-img-top”>
 <div class=”card-body”>
 <h5 class=”card-title”>Luckey donut</h5>
 <p class=”card-text”>This is very lowest cost effective pizza</p>
 <p class=”card-text” style=”font-weight: bold;font-size:16px”>Available : 12 </p>
 <p class=”card-text” style=”color:#7a7a7a”>$ 5.00</p>
 <a href=”#” class=”btn btn-warning”>Add to cart</a>
 </div>
 </div>
 </div>
 <div class=”col-12 col-md-4">
 <div class=”card”>
 <img src=”./donut2.jpg” alt=”” class=”card-img-top”>
 <div class=”card-body”>
 <h5 class=”card-title”>Pretty donut</h5>
 <p class=”card-text”>This is very lowest cost effective pizza</p>
 <p class=”card-text” style=”font-weight: bold;font-size:16px”>Available : 12 </p>
 <p class=”card-text” style=”color:#7a7a7a”>$ 5.00</p>
 <a href=”#” class=”btn btn-warning”>Add to cart</a>
 </div>
 </div>
 </div>
 <div class=”col-12 col-md-4">
 <div class=”card”>
 <img src=”./donut3.jpg” alt=”” class=”card-img-top”>
 <div class=”card-body”>
 <h5 class=”card-title”>Chillie Hot dog</h5>
 <p class=”card-text”>This is very lowest cost effective pizza</p>
 <p class=”card-text” style=”font-weight: bold;font-size:16px”>Available : 12 </p>
 <p class=”card-text” style=”color:#7a7a7a”>$ 5.00</p>
 <a href=”#” class=”btn btn-warning”>Add to cart</a>
 </div>
 </div>
 </div>
 </div>
 <! — Shopping Cart
 this requires backend code so im not going to develop it
 →
 <! — Footer →
 <div class=”row”>
 <div class=”col” style=”background-color: #071d3d;padding:1rem;”>
 <div class=”card text-center” style=”background-color: #071d3d;padding:1rem;”>
 <div class=”flex “>
 <a href=”#” style=”text-decoration: none; padding:5px;color:#ffffff”>Contact Us</a>
 <a href=”#” style=”text-decoration: none; padding:5px;color:#ffffff”>About us</a>
 <a href=”#” style=”text-decoration: none; padding:5px;color:#ffffff”>Help</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js” integrity=”sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin=”anonymous”></script>
</body></html>

All Sample images to my work are taken from Unsplash web site

thank you

Bootstrap
Html5
CSS
Ecommerce Web Development
Online Marketing

--

--

Gaya's techtips

Written by Gaya's techtips

7 Followers

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams