Bootstrap Top Codes

Bootstrap Login Page Example

A clean and responsive login form made only with Bootstrap classes. Put this code inside the body of the starter template of Bootstrap 5 (CSS in the head, JS bundle before the closing body tag).

<div class="container">
  <div class="row min-vh-100 align-items-center justify-content-center">
    <div class="col-12 col-sm-10 col-md-8 col-lg-5">
      <div class="card shadow-sm">
        <div class="card-body p-4">
          <h1 class="h3 text-center mb-4">Sign in</h1>
          <form>
            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="loginEmail" placeholder="name@example.com" required>
              <label for="loginEmail">Email address</label>
            </div>
            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="loginPass" placeholder="Password" required>
              <label for="loginPass">Password</label>
            </div>
            <div class="d-flex justify-content-between align-items-center mb-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="loginRemember">
                <label class="form-check-label" for="loginRemember">Remember me</label>
              </div>
              <a href="#" class="small">Forgot password?</a>
            </div>
            <div class="d-grid">
              <button class="btn btn-primary btn-lg" type="submit">Sign in</button>
            </div>
          </form>
          <p class="text-center text-body-secondary mt-4 mb-0">New here? <a href="#">Create an account</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

How it works

• min-vh-100 align-items-center justify-content-center on the row centers the card in the middle of the screen, vertically and horizontally.
• col-12 col-sm-10 col-md-8 col-lg-5 makes the form narrower on big screens and almost full width on phones.
• form-floating puts the labels inside the fields.
• d-grid makes the button full width, and d-flex justify-content-between puts the checkbox and the link on both sides.

Bootstrap Pricing Table Example

Three pricing plans in cards. They are stacked on a phone and in one row on a medium or bigger screen, with the same height.

<div class="container py-3">
  <div class="row row-cols-1 row-cols-md-3 g-3 text-center">
    <div class="col">
      <div class="card h-100 rounded-3 shadow-sm">
        <div class="card-header py-3"><h2 class="h4 my-0 fw-normal">Free</h2></div>
        <div class="card-body d-flex flex-column">
          <h3 class="display-6">$0<small class="text-body-secondary fw-light fs-5">/mo</small></h3>
          <ul class="list-unstyled mt-3 mb-4">
            <li>1 project</li><li>2 GB storage</li><li>Community support</li>
          </ul>
          <button type="button" class="btn btn-lg btn-outline-primary mt-auto">Sign up for free</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 rounded-3 shadow border-primary">
        <div class="card-header py-3 text-bg-primary border-primary"><h2 class="h4 my-0 fw-normal">Pro <span class="badge text-bg-light">Popular</span></h2></div>
        <div class="card-body d-flex flex-column">
          <h3 class="display-6">$15<small class="text-body-secondary fw-light fs-5">/mo</small></h3>
          <ul class="list-unstyled mt-3 mb-4">
            <li>20 projects</li><li>10 GB storage</li><li>Email support</li>
          </ul>
          <button type="button" class="btn btn-lg btn-primary mt-auto">Get started</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 rounded-3 shadow-sm">
        <div class="card-header py-3"><h2 class="h4 my-0 fw-normal">Business</h2></div>
        <div class="card-body d-flex flex-column">
          <h3 class="display-6">$49<small class="text-body-secondary fw-light fs-5">/mo</small></h3>
          <ul class="list-unstyled mt-3 mb-4">
            <li>Unlimited projects</li><li>100 GB storage</li><li>Phone and email support</li>
          </ul>
          <button type="button" class="btn btn-lg btn-outline-primary mt-auto">Contact us</button>
        </div>
      </div>
    </div>
  </div>
</div>

The preview window is narrow, so the plans are stacked. On a medium or wide screen they are side by side.

How it works

• row-cols-1 row-cols-md-3 makes one card per row on phones and three per row from 768px.
• h-100 on the cards and d-flex flex-column with mt-auto on the button keeps all the buttons at the bottom, even when the lists have different lengths.
• The popular plan is highlighted with a colored header (text-bg-primary), a border and a bigger shadow.

Bootstrap Dashboard Stats Cards

Four small cards that show the main numbers of a dashboard: users, sales, orders and a goal with a progress bar. The icons come from Bootstrap Icons.

<div class="container-fluid">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-xl-4 g-3">
    <div class="col">
      <div class="card h-100"><div class="card-body d-flex align-items-center">
        <div class="rounded-circle bg-primary-subtle text-primary-emphasis p-3 me-3"><i class="bi bi-people fs-4"></i></div>
        <div><div class="text-body-secondary small">Users</div><div class="fs-4 fw-bold">1,284</div></div>
      </div></div>
    </div>
    <div class="col">
      <div class="card h-100"><div class="card-body d-flex align-items-center">
        <div class="rounded-circle bg-success-subtle text-success-emphasis p-3 me-3"><i class="bi bi-currency-rupee fs-4"></i></div>
        <div><div class="text-body-secondary small">Sales</div><div class="fs-4 fw-bold">92,450</div></div>
      </div></div>
    </div>
    <div class="col">
      <div class="card h-100"><div class="card-body d-flex align-items-center">
        <div class="rounded-circle bg-warning-subtle text-warning-emphasis p-3 me-3"><i class="bi bi-bag fs-4"></i></div>
        <div><div class="text-body-secondary small">Orders</div><div class="fs-4 fw-bold">342</div></div>
      </div></div>
    </div>
    <div class="col">
      <div class="card h-100"><div class="card-body">
        <div class="d-flex justify-content-between"><span class="text-body-secondary small">Monthly goal</span><span class="fw-bold">72%</span></div>
        <div class="progress mt-2" role="progressbar" aria-label="Monthly goal" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="height: 8px">
          <div class="progress-bar bg-info" style="width: 72%"></div>
        </div>
      </div></div>
    </div>
  </div>
</div>

How it works

• row-cols-1 row-cols-sm-2 row-cols-xl-4 shows 1, 2 or 4 cards per row, depending on the screen.
• The icon sits in a round box made with rounded-circle p-3 and the “subtle” colors, which also look good in dark mode.
• d-flex align-items-center puts the icon and the text side by side.

Bootstrap Sticky Footer Layout

When a page has only a little content, the footer can float in the middle of the screen. This layout keeps the footer at the bottom of the window with only flex utilities, and it moves down when the content is long.

<div class="d-flex flex-column" style="min-height: 300px">
  <header class="navbar bg-dark" data-bs-theme="dark">
    <div class="container"><a class="navbar-brand" href="#">MySite</a></div>
  </header>

  <main class="flex-grow-1">
    <div class="container py-4">
      <h1 class="h3">Short page</h1>
      <p>This page has only a little content, but the footer is still at the bottom.</p>
    </div>
  </main>

  <footer class="bg-body-tertiary border-top py-3">
    <div class="container text-body-secondary small">&copy; 2026 MySite. All rights reserved.</div>
  </footer>
</div>

How it works

• The wrapper is a flex column: d-flex flex-column, with a minimum height of the full screen.
• flex-grow-1 on the main element makes it take all the free space, so the footer is pushed to the bottom.
• On a real page, use min-vh-100 on the wrapper instead of the fixed height used in this small preview:

<body class="d-flex flex-column min-vh-100">
  <header>...</header>
  <main class="flex-grow-1">...</main>
  <footer>...</footer>
</body>

Bootstrap Dark Mode Toggle

This code switches the page between light and dark mode with data-bs-theme, uses the system setting at the first visit, and remembers the choice of the user.

HTML

<nav class="navbar bg-body-tertiary border-bottom">
  <div class="container">
    <span class="navbar-brand">My site</span>
    <button class="btn btn-outline-secondary" id="themeToggle" type="button">
      <span id="themeLabel">Dark mode</span>
    </button>
  </div>
</nav>
<p class="mt-3">Some text on the page. The colors change with the mode.</p>

JavaScript

const root = document.documentElement;
const button = document.getElementById('themeToggle');
const label = document.getElementById('themeLabel');

function applyTheme(theme) {
  root.setAttribute('data-bs-theme', theme);
  label.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
}

// 1. saved choice, or the system setting
const saved = localStorage.getItem('theme');
const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
applyTheme(saved || system);

// 2. click: change and save
button.addEventListener('click', () => {
  const next = root.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
  applyTheme(next);
  localStorage.setItem('theme', next);
});

Test of the same logic in real Chrome (without the saved value, because the preview is sandboxed):

const root = document.documentElement;
const button = document.getElementById('themeToggle');
const label = document.getElementById('themeLabel');
function applyTheme(theme) {
  root.setAttribute('data-bs-theme', theme);
  label.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
}
button.addEventListener('click', () => {
  const next = root.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
  applyTheme(next);
});
applyTheme('light');
const bg = () => getComputedStyle(document.body).backgroundColor;
console.log('light: label = "' + label.textContent + '", background = ' + bg());
button.click();
console.log('after click: theme = ' + root.getAttribute('data-bs-theme') + ', label = "' + label.textContent + '", background = ' + bg());
button.click();
console.log('after 2nd click: theme = ' + root.getAttribute('data-bs-theme') + ', label = "' + label.textContent + '", background = ' + bg());

How it works

• Bootstrap 5.3 reads data-bs-theme on the html element and changes all its CSS variables.
• prefers-color-scheme is the system setting of the user, used when nothing is saved.
• Put the first part of the script in the head, before the CSS, to avoid a flash of the wrong colors.

Bootstrap Product Card Grid

A product list in cards: 1 per row on a phone, 2 on a tablet and 4 on a big screen. Each card has an image, a sale badge, the price, the stars and a button.

<div class="container py-3">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
    <div class="col">
      <div class="card h-100 position-relative">
        <span class="badge text-bg-danger position-absolute top-0 start-0 m-2">Sale</span>
        <img src="images/photo.jpg" class="card-img-top" alt="Product 1">
        <div class="card-body d-flex flex-column">
          <h2 class="h6 card-title">Cotton T-shirt</h2>
          <div class="text-warning mb-2" aria-label="4 out of 5 stars"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i></div>
          <p class="mb-3"><span class="fw-bold">$19</span> <span class="text-body-secondary text-decoration-line-through small">$29</span></p>
          <button class="btn btn-primary btn-sm mt-auto"><i class="bi bi-cart-plus me-1"></i>Add to cart</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <img src="images/photo.jpg" class="card-img-top" alt="Product 2">
        <div class="card-body d-flex flex-column">
          <h2 class="h6 card-title">Running shoes</h2>
          <div class="text-warning mb-2" aria-label="5 out of 5 stars"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
          <p class="mb-3 fw-bold">$59</p>
          <button class="btn btn-primary btn-sm mt-auto"><i class="bi bi-cart-plus me-1"></i>Add to cart</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <img src="images/photo.jpg" class="card-img-top" alt="Product 3">
        <div class="card-body d-flex flex-column">
          <h2 class="h6 card-title">Backpack</h2>
          <div class="text-warning mb-2" aria-label="3 out of 5 stars"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i><i class="bi bi-star"></i></div>
          <p class="mb-3 fw-bold">$35</p>
          <button class="btn btn-primary btn-sm mt-auto"><i class="bi bi-cart-plus me-1"></i>Add to cart</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <img src="images/photo.jpg" class="card-img-top" alt="Product 4">
        <div class="card-body d-flex flex-column">
          <h2 class="h6 card-title">Water bottle</h2>
          <div class="text-warning mb-2" aria-label="4 out of 5 stars"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i></div>
          <p class="mb-3 fw-bold">$12</p>
          <button class="btn btn-primary btn-sm mt-auto"><i class="bi bi-cart-plus me-1"></i>Add to cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

The preview window is narrow, so the cards are stacked, and you can scroll inside the preview. On a wide screen there are four cards in a row.

How it works

• row-cols-1 row-cols-sm-2 row-cols-lg-4 controls the number of cards in a line.
• The sale badge uses position-absolute top-0 start-0 inside a card with position-relative.
• d-flex flex-column with mt-auto on the button keeps the buttons at the same level.
• Each star group has an aria-label, because the stars are only icons.