How to create dashboard in bootstrap

BootstrapHow-ToBeginner · 4 min read

How to Create a Dashboard in Bootstrap Quickly and Easily

To create a dashboard in Bootstrap, use the container with row and col classes to build a grid layout. Add card components for dashboard items and use navbar or sidebar for navigation. This creates a clean, responsive dashboard interface.

📐

Syntax

A Bootstrap dashboard uses the following main parts:

container: Wraps the whole dashboard for proper alignment and padding.
row: Creates horizontal groups of columns.
col: Defines columns inside rows for layout.
card: Displays content blocks like stats or charts.
navbar or sidebar: Provides navigation links.

html

<div class="container">
  <div class="row">
    <div class="col">
      <!-- Dashboard content here -->
    </div>
  </div>
</div>

Output

A container with a single row and column ready for dashboard content.

💻

Example

This example shows a simple dashboard with a top navigation bar, a sidebar, and main content cards using 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 Dashboard Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .sidebar {
      height: calc(100vh - 56px);
      position: fixed;
      top: 56px; /* height of navbar */
      left: 0;
      width: 200px;
      padding-top: 1rem;
      background-color: #f8f9fa;
      overflow-y: auto;
    }
    .content {
      margin-left: 200px;
      padding: 1rem;
      margin-top: 56px;
      flex-grow: 1;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Dashboard</a>
    </div>
  </nav>

  <div class="sidebar">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Reports</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>
    </ul>
  </div>

  <main class="content">
    <div class="container-fluid">
      <div class="row g-3">
        <div class="col-md-4">
          <div class="card text-white bg-success mb-3">
            <div class="card-body">
              <h5 class="card-title">Users</h5>
              <p class="card-text fs-3">1,234</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-white bg-info mb-3">
            <div class="card-body">
              <h5 class="card-title">Sales</h5>
              <p class="card-text fs-3">$12,345</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-white bg-warning mb-3">
            <div class="card-body">
              <h5 class="card-title">Alerts</h5>
              <p class="card-text fs-3">7</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

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

Output

A webpage with a fixed top blue navbar labeled 'Dashboard', a vertical sidebar on the left with navigation links, and three colored cards in the main area showing Users, Sales, and Alerts stats.

⚠️

Common Pitfalls

Common mistakes when creating a Bootstrap dashboard include:

Not using the grid system properly, causing layout issues on different screen sizes.
Forgetting to add padding or margin, making content stick to edges.
Using fixed widths without responsiveness, breaking mobile views.
Not fixing the navbar or sidebar properly, causing overlap or scroll problems.

html

<!-- Wrong: No grid, no spacing -->
<div>
  <div>Card 1</div>
  <div>Card 2</div>
</div>

<!-- Right: Using Bootstrap grid and spacing -->
<div class="container">
  <div class="row g-3">
    <div class="col-md-6">
      <div class="card p-3">Card 1</div>
    </div>
    <div class="col-md-6">
      <div class="card p-3">Card 2</div>
    </div>
  </div>
</div>

Output

The first block shows cards stacked without spacing or grid, the second block shows cards side by side with proper spacing and responsive columns.

📊

Quick Reference

Tips for building Bootstrap dashboards:

Use container to wrap your dashboard content.
Use row and col classes to create responsive layouts.
Use card components to display dashboard items clearly.
Fix navbar and sidebar for easy navigation.
Use spacing classes like p-3, m-3, and grid gutters g-3 for clean layout.

✅

Key Takeaways

Use Bootstrap's grid system with container, row, and col for responsive dashboard layout.

Cards are ideal for showing dashboard data blocks with consistent styling.

Fix navbar and sidebar positions to keep navigation accessible and visible.

Add spacing classes to avoid cramped content and improve readability.

Test your dashboard on different screen sizes to ensure responsiveness.