Free Bootstrap Admin Templates (2026) and How to Build One

A Bootstrap admin template gives you the screens every back office needs: a sidebar, a dashboard with stats and charts, tables, forms, and sign-in pages, all built with Bootstrap classes. This guide compares the best free Bootstrap 5 admin and dashboard templates in 2026, with their versions, licenses, and how actively they are maintained, and then shows how to build a simple admin dashboard yourself with Bootstrap 5.3 when you only need a few screens.

The best free Bootstrap admin templates

Template	Built on	Latest version	Last release	GitHub stars	License
AdminLTE	Bootstrap 5.3	4.10.1	October 2026	45.7K	MIT
Tabler	Bootstrap 5	1.7.4	November 2026	42K	MIT
CoreUI	CoreUI 5 (Bootstrap-compatible)	5.6.0	August 2026	12.3K	MIT
AdminKit	Bootstrap 5.3	4.1.0	October 2026	1.7K	MIT
Metis	Bootstrap 5.3	3.7.0	November 2026	2.9K	MIT
Mazer	Bootstrap 5.3	2.3.1	August 2025	3.1K	MIT
SB Admin	Bootstrap 5.2	7.0.7	August 2024	3.3K	MIT
SB Admin 2	Bootstrap 4.6	4.1.4	July 2024	9.9K	MIT

Versions, dates, and stars are from each project’s GitHub repository in November 2026. All of them are free under the MIT license, so you can use them in commercial and client projects.

AdminLTE

The best-known free admin template, with over 45,000 GitHub stars. Version 4 rebuilt it on Bootstrap 5.3 with plain JavaScript (no jQuery), and it is updated often. It comes with dozens of pages: dashboards, forms, tables, widgets, a mailbox, and sign-in screens. Pick it when you want the widest set of ready pages and a large community. Version 3 and older use Bootstrap 4 and jQuery, so check which version a tutorial or plugin is written for.

Tabler

A clean, modern dashboard kit built on Bootstrap 5, with light and dark mode, hundreds of components, and its own set of more than 6,000 icons. Tabler ships Bootstrap inside its own CSS and JS files, so you load Tabler instead of Bootstrap. Pick it for the most polished out-of-the-box look.

CoreUI

CoreUI is built on its own fork of Bootstrap, so most Bootstrap classes work, plus extra components. Its main strength is that the same admin template exists for React, Vue, and Angular, which helps if you plan to move from HTML to a JavaScript framework. Some components and templates are only in the paid Pro version.

AdminKit

A lightweight Bootstrap 5.3 dashboard with a short list of well-made pages: dashboard, profile, sign-in, tables, charts, and maps. Easy to read and change, which makes it a good starting point for a small app. A paid Pro version adds more pages.

Metis and Mazer

Two smaller Bootstrap 5.3 templates. Metis was recently modernized with a Vite build and is actively updated. Mazer has a clean look and a good set of pages, but its last release was in August 2025.

SB Admin and SB Admin 2

Start Bootstrap’s admin templates are simple and widely used in tutorials. SB Admin 2 is the more popular of the two, but it still uses Bootstrap 4.6 and jQuery. For a new project, use SB Admin, which is on Bootstrap 5.2 and needs no jQuery, or one of the templates above.

Bootstrap’s own Dashboard example

The official Dashboard example is a single page with a sidebar, a chart, and a table, written with nothing but Bootstrap 5.3 classes. It isn’t a full template, but it is the clearest code to learn from.

Which admin template should you choose?

• The most pages and the biggest community: AdminLTE.
• The best design out of the box: Tabler.
• You may move to React, Vue, or Angular later: CoreUI.
• A small, readable starting point: AdminKit, or Bootstrap’s Dashboard example.
• You only need a few screens: build them yourself, as below. A template adds pages, plugins, and CSS you may never use.

Build a simple admin dashboard with Bootstrap 5.3

A dashboard needs four parts: a sidebar, a row of stat cards, a chart, and a table. Load Bootstrap, Bootstrap Icons, and Chart.js:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.9/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-yEPZ7jP9S0QKiUQ0m3jjsO4ProIW7wvR9gXkI7JOGa2XVsw53Yke2bsdkBbjmmiX" crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.2/font/bootstrap-icons.min.css" rel="stylesheet">
  <style>
    @media (min-width: 992px) {
      #sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
    }
  </style>
</head>
<body>
  <!-- layout goes here -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.9/dist/js/bootstrap.bundle.min.js" integrity="sha384-WyOxWvTyr1QaMPfiPJSv76iReVthorl5uWlFtZPyK0IEB0hGzo9y5Bp9mYanr8Bu" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.6.1/dist/chart.umd.min.js"></script>
</body>
</html>

The layout and sidebar

The sidebar is always visible on large screens and slides in from the left on phones. It uses the responsive offcanvas explained in the Bootstrap sidebar guide:

<div class="d-flex">
  <nav class="offcanvas-lg offcanvas-start d-lg-flex flex-column bg-dark text-body border-end" data-bs-theme="dark" id="sidebar"
    tabindex="-1" aria-label="Main menu" style="width: 240px;">
    <div class="offcanvas-header">
      <span class="fs-5 fw-semibold">Acme Admin</span>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebar" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body flex-lg-grow-1 d-flex flex-column p-3">
      <a href="/" class="d-none d-lg-block fs-5 fw-semibold text-white text-decoration-none mb-4">Acme Admin</a>
      <ul class="nav nav-pills flex-column gap-1">
        <li class="nav-item"><a class="nav-link active d-flex gap-2" aria-current="page" href="/admin"><i class="bi bi-speedometer2"></i> Dashboard</a></li>
        <li class="nav-item"><a class="nav-link d-flex gap-2" href="/admin/orders"><i class="bi bi-receipt"></i> Orders</a></li>
        <li class="nav-item"><a class="nav-link d-flex gap-2" href="/admin/customers"><i class="bi bi-people"></i> Customers</a></li>
        <li class="nav-item"><a class="nav-link d-flex gap-2" href="/admin/reports"><i class="bi bi-bar-chart"></i> Reports</a></li>
      </ul>
      <a class="nav-link d-flex gap-2 mt-auto" href="/admin/settings"><i class="bi bi-gear"></i> Settings</a>
    </div>
  </nav>

  <div class="flex-grow-1 min-vh-100 bg-body-tertiary">
    <header class="d-flex align-items-center gap-2 border-bottom bg-body px-3 py-2">
      <button class="btn btn-outline-secondary d-lg-none" type="button" data-bs-toggle="offcanvas"
        data-bs-target="#sidebar" aria-controls="sidebar" aria-label="Open menu"><i class="bi bi-list"></i></button>
      <h1 class="h5 mb-0">Dashboard</h1>
    </header>
    <main class="p-3 p-lg-4">
      <!-- stat cards, chart, and table go here -->
    </main>
  </div>
</div>

data-bs-theme="dark" with text-body makes only the sidebar dark (the theme attribute switches Bootstrap’s color variables, and text-body applies the light text color to the sidebar itself). d-lg-flex flex-column and flex-lg-grow-1 let the Settings link sit at the bottom on large screens, where Bootstrap stops the offcanvas body from growing. bg-body-tertiary gives the main area the light gray background most dashboards use, so white cards stand out on it.

Stat cards

A row of cards with the key numbers. Four across on large screens, two on tablets, one on phones:

<div class="row g-3 mb-4">
  <div class="col-sm-6 col-xl-3">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body">
        <div class="text-body-secondary small">Revenue</div>
        <div class="fs-3 fw-semibold">$48,210</div>
        <span class="badge text-bg-success">+12%</span> <span class="small text-body-secondary">vs last month</span>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body">
        <div class="text-body-secondary small">Orders</div>
        <div class="fs-3 fw-semibold">1,284</div>
        <span class="badge text-bg-success">+4%</span> <span class="small text-body-secondary">vs last month</span>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body">
        <div class="text-body-secondary small">New customers</div>
        <div class="fs-3 fw-semibold">312</div>
        <span class="badge text-bg-danger">-3%</span> <span class="small text-body-secondary">vs last month</span>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body">
        <div class="text-body-secondary small">Refund rate</div>
        <div class="fs-3 fw-semibold">1.8%</div>
        <div class="progress mt-2" role="progressbar" aria-label="Refund rate" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100" style="height: 6px;">
          <div class="progress-bar" style="width: 18%"></div>
        </div>
      </div>
    </div>
  </div>
</div>

The badges show the change, and the last card uses a thin progress bar.

A chart

Bootstrap has no chart component, so dashboards use a chart library. Chart.js is the most common choice:

<div class="card border-0 shadow-sm mb-4">
  <div class="card-body">
    <h2 class="h6 mb-3">Revenue, last 6 months</h2>
    <div style="height: 280px;"><canvas id="revenue-chart" aria-label="Revenue chart" role="img"></canvas></div>
  </div>
</div>

<script>
  const primary = getComputedStyle(document.documentElement).getPropertyValue('--bs-primary').trim()
  new Chart(document.getElementById('revenue-chart'), {
    type: 'line',
    data: {
      labels: ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'],
      datasets: [{ label: 'Revenue', data: [31200, 34800, 33900, 39500, 43000, 48210], borderColor: primary, backgroundColor: primary, tension: 0.3 }]
    },
    options: { maintainAspectRatio: false, plugins: { legend: { display: false } } }
  })
</script>

Reading --bs-primary keeps the chart in your theme’s color, and the wrapper’s fixed height with maintainAspectRatio: false lets the chart fill the card at any width. Put this script after the Chart.js <script> tag.

A table of recent orders

A table inside a card, with table-responsive so it scrolls sideways on phones instead of breaking the layout:

<div class="card border-0 shadow-sm">
  <div class="card-body">
    <h2 class="h6 mb-3">Recent orders</h2>
    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0">
        <thead>
          <tr><th scope="col">Order</th><th scope="col">Customer</th><th scope="col">Status</th><th scope="col" class="text-end">Total</th></tr>
        </thead>
        <tbody>
          <tr><td>#1042</td><td>Maria Lopez</td><td><span class="badge text-bg-success">Paid</span></td><td class="text-end">$129.00</td></tr>
          <tr><td>#1041</td><td>James Chen</td><td><span class="badge text-bg-warning">Pending</span></td><td class="text-end">$64.50</td></tr>
          <tr><td>#1040</td><td>Sara Novak</td><td><span class="badge text-bg-secondary">Refunded</span></td><td class="text-end">$220.00</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

For long lists, add pagination under the table.

Dark mode

Bootstrap 5.3 has dark mode built in. Set data-bs-theme="dark" on the <html> element, and the cards, table, and backgrounds above switch together, because they use Bootstrap’s body and tertiary colors instead of fixed ones. The dark mode guide shows how to add a toggle that remembers the user’s choice. Chart.js doesn’t follow the theme on its own, so set its grid and text colors when the theme changes.

Make the template match your brand

Whether you use a template or build your own, change the primary color, font, and corner radius so the admin panel matches your product. Design the theme in the bootstrap.build editor and export the compiled CSS. For templates that load Bootstrap’s stylesheet, such as AdminKit or a dashboard you built yourself, replace that link with your exported file. Templates that bundle their own CSS, such as Tabler and CoreUI, are themed through their own Sass variables instead.

FAQ

What is the best free Bootstrap admin template?

AdminLTE is the most popular, with over 45,000 GitHub stars and a large set of pages on Bootstrap 5.3. Tabler has the most polished design, CoreUI suits teams that may move to React, Vue, or Angular, and AdminKit is a small, easy-to-read starting point. All four are free under the MIT license.

Is AdminLTE free for commercial use?

Yes. AdminLTE is released under the MIT license, so you can use it in commercial and client projects, as long as you keep the license notice in the source.

Does AdminLTE use Bootstrap 5?

AdminLTE 4 uses Bootstrap 5.3 and plain JavaScript without jQuery. AdminLTE 3 and older versions use Bootstrap 4 and jQuery.

How do I make an admin dashboard with Bootstrap?

Build a layout with a sidebar that uses the responsive offcanvas (offcanvas-lg), add a row of cards for key numbers, a chart from a library such as Chart.js, and a table of recent records inside a card. Everything except the chart uses standard Bootstrap 5.3 classes.

Does Bootstrap have a chart component?

No. Bootstrap styles the layout and the cards around a chart, but the chart itself comes from a library such as Chart.js, ApexCharts, or ECharts. Bootstrap’s own Dashboard example uses Chart.js.