Dashboard layout in Bootsrap

Introduction

A dashboard layout helps organize information clearly so you can see important data at a glance.

When you want to show sales numbers, charts, and key info on one screen.

When you need a simple page to monitor business performance daily.

When you want to compare different data points side by side easily.

When you want your dashboard to look good on phones and computers.

When you want users to find important info quickly without scrolling too much.

Syntax

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-md-4">Content 1</div>
    <div class="col-md-4">Content 2</div>
    <div class="col-md-4">Content 3</div>
  </div>
</div>

Use .container to center and add padding around your dashboard.

.row groups columns horizontally, and .col-md-* sets column width on medium+ screens.

Examples

Two equal columns side by side for chart and summary info.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-md-6">Chart</div>
    <div class="col-md-6">Summary</div>
  </div>
</div>

Sidebar menu on left and main dashboard content on right.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-md-3">Menu</div>
    <div class="col-md-9">Main Content</div>
  </div>
</div>

Widgets stack vertically on small screens and align horizontally on medium+ screens.

Bootsrap

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">Widget 1</div>
    <div class="col-12 col-md-4">Widget 2</div>
    <div class="col-12 col-md-4">Widget 3</div>
  </div>
</div>

Sample Program

This dashboard shows three key metrics in equal columns that stack on small screens. It uses Bootstrap's grid and spacing classes for a clean look.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Simple Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-4">
    <h1 class="mb-4">Sales Dashboard</h1>
    <div class="row g-3">
      <div class="col-12 col-md-4">
        <div class="p-3 border bg-light">Total Sales: $10,000</div>
      </div>
      <div class="col-12 col-md-4">
        <div class="p-3 border bg-light">New Customers: 150</div>
      </div>
      <div class="col-12 col-md-4">
        <div class="p-3 border bg-light">Orders: 320</div>
      </div>
    </div>
  </div>
</body>
</html>

Important Notes

Use Bootstrap's grid system to make your dashboard responsive automatically.

Use spacing classes like my-4 and g-3 to add space between elements.

Keep your dashboard simple and avoid clutter for easy understanding.

Summary

Dashboard layout organizes data clearly using rows and columns.

Bootstrap grid helps make dashboards look good on all screen sizes.

Use spacing and borders to separate dashboard sections visually.

Practice

1. What is the main purpose of using a grid layout in a Bootstrap dashboard?

easy

A. To organize content into rows and columns for clear display

B. To add animations to dashboard elements

C. To connect the dashboard to a database

D. To change the color scheme automatically

Solution

1. Step 1: Understand Bootstrap grid basics

   The Bootstrap grid system divides the page into rows and columns to arrange content neatly.

2. Step 2: Relate grid to dashboard layout

   Using rows and columns helps place charts and tables clearly, making data easy to read.

3. Final Answer:

   To organize content into rows and columns for clear display -> Option A

4. Quick Check:

   Grid layout = clear content organization [OK]

Hint: Grid means rows and columns for neat layout [OK]

Common Mistakes:

• Confusing grid with animations
• Thinking grid connects to databases
• Assuming grid changes colors

2. Which Bootstrap class correctly creates a row in a dashboard layout?

easy

A. <div class='container'>

B. <div class='row'>

C. <div class='col'>

D. <div class='card'>

Solution

1. Step 1: Identify Bootstrap classes for layout

   The row class defines a horizontal group of columns in Bootstrap.

2. Step 2: Differentiate from other classes

   container wraps content, col defines columns inside rows, and card styles content boxes.

3. Final Answer:

   <div class='row'> -> Option B

4. Quick Check:

   Row class = horizontal grouping [OK]

Hint: Rows group columns horizontally in Bootstrap [OK]

Common Mistakes:

• Using container instead of row for rows
• Confusing col with row
• Using card class for layout rows

3. Given this Bootstrap dashboard snippet:

<div class='row'>
  <div class='col-6'>Chart A</div>
  <div class='col-6'>Chart B</div>
</div>

How will the two charts appear on a large screen?

medium

A. Chart A and Chart B overlap each other

B. Chart A appears above Chart B, both full width

C. Chart A and Chart B appear side by side, each taking half the width

D. Only Chart A is visible, Chart B is hidden

Solution

1. Step 1: Understand col-6 class meaning

   Each col-6 takes 6 out of 12 grid columns, so half the row width.

2. Step 2: Analyze layout on large screen

   Both columns fit side by side in the same row, each occupying half the width.

3. Final Answer:

   Chart A and Chart B appear side by side, each taking half the width -> Option C

4. Quick Check:

   col-6 + col-6 = side by side halves [OK]

Hint: col-6 means half width side by side [OK]

Common Mistakes:

• Thinking columns stack vertically by default
• Assuming overlap without floats
• Believing one column hides the other

4. Identify the error in this Bootstrap dashboard layout code:

<div class='row'>
  <div class='col-8'>Widget 1</div>
  <div class='col-6'>Widget 2</div>
</div>

medium

A. The total column widths exceed 12, causing layout issues

B. Missing container class around the row

C. Row class should be col-12 instead

D. Widgets should use card class instead of col

Solution

1. Step 1: Sum the column widths inside the row

   Columns use col-8 and col-6, totaling 14 (8+6).

2. Step 2: Check Bootstrap grid rules

   Bootstrap grid allows max 12 columns per row; exceeding causes wrapping or broken layout.

3. Final Answer:

   The total column widths exceed 12, causing layout issues -> Option A

4. Quick Check:

   Sum col widths > 12 breaks layout [OK]

Hint: Sum columns ≤ 12 per row in Bootstrap [OK]

Common Mistakes:

• Ignoring total column width limit
• Thinking container is mandatory for rows
• Confusing row and col classes

5. You want a dashboard with three equal sections horizontally on desktop, but stacked vertically on small screens. Which Bootstrap classes achieve this?

hard

A. col-3 col-sm-6 for each section

B. col-4 col-md-12 for each section

C. col-6 col-lg-3 for each section

D. col-12 col-md-4 for each section

Solution

1. Step 1: Understand responsive column classes

   col-12 makes full width on small screens; col-md-4 makes one-third width on medium+ screens.

2. Step 2: Apply to dashboard sections

   Using col-12 col-md-4 on each of three sections stacks them vertically on small devices and places side by side on desktops.

3. Final Answer:

   col-12 col-md-4 for each section -> Option D

4. Quick Check:

   Full width small + one-third medium = responsive layout [OK]

Hint: Use col-12 for small, col-md-4 for desktop thirds [OK]

Common Mistakes:

• Reversing small and medium classes
• Using fixed widths without responsiveness
• Choosing wrong breakpoint prefixes