search

V-FOR-VEND3TTA / bootstrap-admin-theme

A comprehensive e-commerce admin built in Bootstrap
https://v-for-vend3tta.github.io/bootstrap-admin-theme/
MIT License
0 stars 0 forks source link

Layout & Structure #1

Closed V-FOR-VEND3TTA closed 1 week ago

V-FOR-VEND3TTA commented 2 weeks ago

Use Bootstrap's grid system for a responsive layout.

Include sections for:

We'll create a basic responsive layout using Bootstrap's grid system with a sidebar, top navbar, and a main content area. Here's the initial HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>E-commerce Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      display: flex;
      min-height: 100vh;
      overflow-x: hidden;
    }
    #sidebar {
      min-width: 250px;
      background-color: #343a40;
      color: #fff;
    }
    #sidebar .nav-link {
      color: #fff;
    }
    #content {
      flex-grow: 1;
      padding: 20px;
    }
  </style>
</head>
<body>
  <!-- Sidebar -->
  <nav id="sidebar" class="bg-dark">
    <div class="p-4">
      <h4>E-commerce Admin</h4>
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Dashboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Orders</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Customers</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Main content -->
  <div id="content">
    <!-- Top navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">—">Admin Dashboard</a>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Notifications</a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- Dashboard content -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3">
          <div class="card bg-primary text-white mb-4">
            <div class="card-body">Total Sales</div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card bg-success text-white mb-4">
            <div class="card-body">Orders</div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card bg-danger text-white mb-4">
            <div class="card-body">Revenue</div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card bg-warning text-white mb-4">
            <div class="card-body">Customers</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation:

  1. Sidebar: Created a vertical navigation for different sections like "Dashboard," "Orders," "Products," etc.
  2. Top Navbar: Includes a simple navbar with an area for notifications.
  3. Main Content Area: A grid system displaying cards for key metrics (Total Sales, Orders, Revenue, and Customers).
V-FOR-VEND3TTA commented 1 week ago

We added a bit of text to the card and used classes to place the cards in the center.