CodeShikhi
Back to Full Page Component
E-commerce Login Page

E-commerce login Page

Login & Register Page:  i. Breadcrumb Section.  ii. Toggle between Login and Register.  iii. Login Form Section (User Name, Password).  iv. Social Login Buttons (Google, Facebook).  v. Promotional Offers (using owl carousel). 2. Full container wide navigation menu with mouse hover effect. 3. Confirmation popup window when submit the login form.

#E-commerce login Page#Login Page#Full Login

Live preview

Source code

html
<div class="container py-4">
  <!-- i. Breadcrumb Section -->
  <nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb bg-light p-3 rounded-4 shadow-sm border-0">
      <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-primary">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">Login & Register</li>
    </ol>
  </nav>

  <!-- 2. Full Container Wide Navigation Menu with Hover Effect -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded-4 mb-5 p-3 shadow hover-nav">
    <div class="container-fluid">
      <a class="navbar-brand fw-bold" href="#">SHOP<span class="text-primary">EASE</span></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMenu">
        <ul class="navbar-nav w-100 justify-content-between text-center">
          <li class="nav-item"><a class="nav-link px-3" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Shop</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Categories</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Cart</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Checkout</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Dashboard</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="row g-5 align-items-center">
    <!-- FORM SECTION -->
    <div class="col-lg-6 order-2 order-lg-1">
      <div class="card border-0 shadow-lg rounded-5 overflow-hidden">
        <div class="card-header bg-white border-0 p-3 pt-4">
          <!-- ii. Toggle between Login and Register -->
          <ul class="nav nav-pills nav-justified bg-light rounded-pill p-1" id="authTab" role="tablist">
            <li class="nav-item">
              <button class="nav-link active rounded-pill fw-bold py-2" id="login-tab" data-bs-toggle="pill" data-bs-target="#login" type="button">Login</button>
            </li>
            <li class="nav-item">
              <button class="nav-link rounded-pill fw-bold py-2" id="register-tab" data-bs-toggle="pill" data-bs-target="#register" type="button">Register</button>
            </li>
          </ul>
        </div>

        <div class="card-body p-4 p-md-5 tab-content">
          <!-- iii. Login Form Section -->
          <div class="tab-pane fade show active" id="login">
            <h3 class="fw-bold mb-4">Welcome Back</h3>
            <form id="loginForm">
              <div class="mb-3">
                <label class="form-label small fw-bold">User Name or Email</label>
                <div class="input-group">
                  <span class="input-group-text bg-white border-end-0 border-2 rounded-start-4"><i class="bi bi-person text-muted"></i></span>
                  <input type="text" class="form-control border-start-0 border-2 rounded-end-4 shadow-none p-2" placeholder="username" required>
                </div>
              </div>
              <div class="mb-4">
                <label class="form-label small fw-bold">Password</label>
                <div class="input-group">
                  <span class="input-group-text bg-white border-end-0 border-2 rounded-start-4"><i class="bi bi-shield-lock text-muted"></i></span>
                  <input type="password" class="form-control border-start-0 border-2 rounded-end-4 shadow-none p-2" placeholder="••••••••" required>
                </div>
              </div>
              <button type="submit" class="btn btn-primary w-100 rounded-4 py-3 fw-bold mb-4 shadow">Sign In</button>
            </form>

            <!-- iv. Social Login Buttons -->
            <div class="text-center position-relative mb-4">
              <hr>
              <span class="position-absolute top-50 start-50 translate-middle bg-white px-3 small text-muted">Or login with</span>
            </div>
            <div class="row g-3">
              <div class="col-sm-6">
                <button class="btn btn-outline-secondary w-100 rounded-pill py-2 d-flex align-items-center justify-content-center">
                  <i class="bi bi-google me-2 text-danger"></i> Google
                </button>
              </div>
              <div class="col-sm-6">
                <button class="btn btn-outline-secondary w-100 rounded-pill py-2 d-flex align-items-center justify-content-center">
                  <i class="bi bi-facebook me-2 text-primary"></i> Facebook
                </button>
              </div>
            </div>
          </div>

          <!-- Register Pane -->
          <div class="tab-pane fade" id="register">
            <h3 class="fw-bold mb-4">Create Account</h3>
            <form>
              <div class="mb-3">
                <label class="form-label small fw-bold">Full Name</label>
                <input type="text" class="form-control rounded-4 p-2 bg-light border-0 shadow-none" placeholder="First Last">
              </div>
              <div class="mb-3">
                <label class="form-label small fw-bold">Email Address</label>
                <input type="email" class="form-control rounded-4 p-2 bg-light border-0 shadow-none" placeholder="name@example.com">
              </div>
              <div class="mb-4">
                <label class="form-label small fw-bold">New Password</label>
                <input type="password" class="form-control rounded-4 p-2 bg-light border-0 shadow-none" placeholder="••••••••">
              </div>
              <button type="submit" class="btn btn-dark w-100 rounded-4 py-3 fw-bold">Join Now</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- v. Promotional Offers Section -->
    <div class="col-lg-6 order-1 order-lg-2">
      <div id="promoOfferSlider" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="p-5 bg-primary bg-gradient text-white rounded-5 shadow-sm text-center">
              <i class="bi bi-gift-fill display-1 mb-4"></i>
              <h2 class="fw-bold">50% Welcome Discount</h2>
              <p class="mb-4">Register today and get a flat 50% discount on your first three orders!</p>
              <span class="badge bg-white text-primary rounded-pill px-4 py-2 fs-6">CLAIM NOW</span>
            </div>
          </div>
          <div class="carousel-item">
            <div class="p-5 bg-danger bg-gradient text-white rounded-5 shadow-sm text-center">
              <i class="bi bi-truck display-1 mb-4"></i>
              <h2 class="fw-bold">Free Shipping Forever</h2>
              <p class="mb-4">Join our VIP membership and never pay for shipping again on any items.</p>
              <span class="badge bg-white text-danger rounded-pill px-4 py-2 fs-6">SEE TERMS</span>
            </div>
          </div>
        </div>
        <div class="carousel-indicators mb-0 mt-4 position-relative">
          <button type="button" data-bs-target="#promoOfferSlider" data-bs-slide-to="0" class="active rounded-circle" style="width:12px; height:12px;"></button>
          <button type="button" data-bs-target="#promoOfferSlider" data-bs-slide-to="1" class="rounded-circle" style="width:12px; height:12px;"></button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 3. Confirmation Popup Window (Modal) -->
<div class="modal fade" id="submitModal" data-bs-backdrop="static" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded-5 border-0 shadow">
      <div class="modal-body text-center p-5">
        <div class="mb-4">
          <i class="bi bi-patch-check-fill text-success" style="font-size: 5rem;"></i>
        </div>
        <h3 class="fw-bold">Authentication Requested</h3>
        <p class="text-muted">We are verifying your credentials. You will be redirected shortly.</p>
        <div class="d-grid mt-4">
          <button type="button" class="btn btn-primary rounded-pill py-2" data-bs-dismiss="modal">Confirm & Proceed</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Full container wide navigation hover effect */
  .hover-nav .nav-link {
    transition: all 0.3s ease;
    position: relative;
  }

  .hover-nav .nav-link:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0d6efd;
    transition: width 0.3s ease;
  }

  .hover-nav .nav-link:hover:after {
    width: 100%;
  }

  .hover-nav .nav-link:hover {
    color: #0d6efd !important;
    transform: translateY(-2px);
  }

  /* Form Customization */
  .nav-pills .nav-link.active {
    background-color: #fff !important;
    color: #0d6efd !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .nav-pills .nav-link {
    color: #6c757d;
  }

  .carousel-item {
    min-height: 400px;
  }

  @media (max-width: 991px) {
    .navbar-nav {
      padding-top: 20px;
    }

    .hover-nav .nav-link:after {
      display: none;
    }
  }

</style>

<script>
  // Handle form submission and show confirmation modal
  document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const confirmationModal = new bootstrap.Modal(document.getElementById('submitModal'));
    confirmationModal.show();
  });

</script>
How to use this e-commerce login page

Add it to your project in three steps

  1. Copy the HTML from the Source code tab above and paste it inside your <div class="container"> wrapper.
  2. Make sure the Bootstrap 5 CDN CSS and JS are linked in your <head> and before </body>. Any CodeShikhi component assumes Bootstrap 5.3+ is already loaded.
  3. Swap the placeholder text, links, and images for your own content — the layout, spacing, and responsive behaviour stay intact.

The E-commerce login Page block is fully responsive and works on every screen from 320 px phones to 1440 px+ desktops without additional CSS.

Accessibility checklist

Ship it accessible by default

  • Use semantic HTML landmarks — <header>, <nav>, <main>, <footer> — so screen readers can navigate your page.
  • Give every image an alt attribute (empty alt="" if it's decorative).
  • Label icon-only buttons with aria-label and keep focus outlines visible.
  • Maintain a contrast ratio of at least 4.5:1 for body text against its background.
  • Test the e-commerce login page with Tab / Shift+Tab and Enter — every interactive element should be reachable.
Step-by-step customisation

Make it match your brand

  1. Change the colour palette by overriding Bootstrap CSS variables: --bs-primary, --bs-body-bg.
  2. Adjust spacing with utility classes such as py-5, gap-4, and mt-lg-5 — no custom CSS required.
  3. Swap the typography by loading a Google Font in your <head> and setting --bs-body-font-family.
  4. Replace stock images with brand assets. Keep dimensions similar to avoid layout shift.
  5. Preview at multiple breakpoints (mobile, tablet, desktop) and tweak column spans if content wraps awkwardly.

Need the full theory? Read our Bootstrap 5 Technical Introduction Guide for grid, breakpoints, and Sass customisation in depth.

About the E-commerce login Page e-commerce login page

This e-commerce login page is part of the free CodeShikhi (কোড শিখি) Bootstrap 5 library — a growing collection of copy-paste website building blocks curated for learners and freelance developers. Every block is written in clean, semantic HTML with Bootstrap utility classes, keeps custom CSS to the minimum needed, and works without any build step. Use it as a starting point and adapt the markup, colours, and content to fit your project's brand and audience.

If you spot a bug, want a new variation, or would like to contribute an improvement, reach us via the contact page — we ship updates weekly based on community feedback.

Detailed Technical Breakdown

Detailed Technical Breakdown: E-commerce login Page

Browser compatibility & standards

The E-commerce login Page e-commerce login page is authored against Bootstrap 5.3, which drops legacy Internet Explorer support and targets modern evergreen engines — Chrome, Edge, Firefox, Safari, and all Chromium-based mobile browsers. Because the markup relies exclusively on the standard CSS features that ship with Bootstrap (Flexbox, CSS Grid, CSS custom properties, and the responsive breakpoint system), you can safely deploy this e-commerce login page to any browser released in the last five years without polyfills. If you need to support very old WebKit or Samsung Internet builds, load the standard Bootstrap 5 CSS from the official jsDelivr CDN — the bundled autoprefixer output already covers those vendor prefixes.

Performance impact

Performance-wise this block is intentionally light. The HTML payload for a typical Bootstrap e-commerce login page is under 4 KB gzipped, and it shares the same Bootstrap CSS/JS bundle you are already loading — meaning the marginal cost of adding it to a page is effectively zero KB on repeat visits. There is no JavaScript framework runtime, no hydration cost, and no client-side data fetching. The only images referenced are placeholders you will replace with your own assets; when you do, serve them as WebP or AVIF, add explicit width and height attributes to prevent layout shift (CLS), and lazy-load anything below the fold with loading="lazy". These small changes typically move Lighthouse Performance scores from the mid-80s into the 95+ range on both mobile and desktop.

Utility classes used

The e-commerce login page leans on Bootstrap's utility-first classes to stay declarative: spacing utilities (p-*, m-*, gap-*), the flex helpers (d-flex, align-items-*, justify-content-*), the grid system (container, row, col-lg-*), typography helpers (display-*, lead, text-*), and colour utilities that resolve to Bootstrap CSS variables such as --bs-primary, --bs-body-bg, and --bs-border-color. Because everything is expressed as utilities you can re-theme the entire e-commerce login page by overriding a handful of CSS variables at the :root level — no Sass recompile required.

Exact customisation steps

  1. Copy the source HTML from the tab above and paste it inside your <body>. The outer <div class="container"> wrapper is already included so the e-commerce login page sits on the Bootstrap grid.
  2. Replace the placeholder headings and paragraphs with your own copy. Keep heading levels in order (h1 → h2 → h3) so screen readers and search engines can parse the document outline.
  3. Swap any <img> tags for your brand assets. Match the original aspect ratio to avoid layout shift, and always fill in a meaningful alt attribute.
  4. Retune the palette by overriding CSS variables::root { --bs-primary: #4f46e5; --bs-body-bg: #ffffff; }. All utility colour classes update automatically.
  5. Test at each Bootstrap breakpoint — sm (576 px), md (768 px),lg (992 px), xl (1200 px), xxl (1400 px) — using your browser's device toolbar, and tweak column spans if long content wraps.
  6. Ship it with the standard Bootstrap 5 CDN in the <head> and the JS bundle before the closing </body>. No build step required.
Technical & Performance Integration Guide

Technical & Performance Integration Guide — E-commerce login Page (form)

When and why to use this form

Forms are where accessibility mistakes cost real money: every unlabelled field is a visitor who abandons the flow. Bootstrap's form controls already handle sizing, focus rings and validation states — your job is to wire up labels, describe errors and keep the tab order logical.

Accessibility & ARIA attributes

Every input needs a <label for="id"> — placeholders are not labels, they disappear on focus and are ignored by many screen readers. Group related radio buttons or checkboxes in a <fieldset> with a <legend>. Attach help text and error messages with aria-describedby, and set aria-invalid="true" on a field that failed validation so assistive technology announces the problem. Use type="email", type="tel" and inputmode to trigger the correct mobile keyboard, and mark required fields with the required attribute rather than only an asterisk.

Performance notes for this pattern

Client-side validation should be progressive: the form must still submit and validate on the server with JavaScript disabled. Bootstrap's .needs-validation pattern adds under 1 KB of script. Avoid loading a validation library and a date-picker bundle for a three-field contact form — native <input type="date"> is supported everywhere that matters and costs nothing.

Three customisation tricks

  • Use .form-floating for compact layouts that keep the label visible after typing.
  • Add .was-validated on submit to reveal all Bootstrap validation feedback at once.
  • Set autocomplete tokens (name, email, tel) so browsers can fill the form in one tap — a measurable conversion win on mobile.

Mistakes to avoid

  • Using placeholder text as the only label.
  • Disabling the submit button until the form is valid, which leaves keyboard users with no way to trigger error messages.

More designs in this section

Agency Full Home Page
About Agency Full Page
Technical Training Center (TTC) Home Page
Technical Training Center About Page