Get started with admin-lte CDN

MIT licensed

Admin-LTE: Free, open-source Bootstrap 4 template. Modern, responsive design for web apps, includes essential jQuery plugins.

Tags:

css
js
html
template
admin
bootstrap
theme
backend
responsive

Stable version

https://cdn.cdnhub.io/admin-lte/3.2.0/js/adminlte.min.js Copied!

How to start using admin-lte CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with admin-lte CDN - cdnhub.io</title>
  <!-- Add Admin-LTE CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.2.0/css/adminlte.min.css">
  <!-- Add Admin-LTE JS -->
  <script src="https://cdn.cdnhub.io/admin-lte/3.2.0/js/adminlte.min.js"></script>
</head>
<body class="hold-transition sidebar-mini">
  <div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
      <!-- Navbar brand -->
      <a href="#" class="navbar-brand">
        <img src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.2.0/brand/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
        <span class="brand-text font-weight-light">Admin-LTE</span>
      </a>
      <!-- Sidebar toggle button -->
      <button class="sidebar-toggle d-flex" id="sidebarToggle">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- Right navbar links -->
      <ul class="navbar-nav ml-auto">
        <!-- Messages Dropdown Menu -->
        <li class="nav-item dropdown">
          <a class="nav-link" data-toggle="dropdown" href="#">
            <i class="far fa-comments"></i>
            <span class="badge badge-danger navbar-badge">3</span>
          </a>
          <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
            <a href="#" class="dropdown-item text-center text-muted text-sm p-3">
              Message Center
              <span class="float-right text-muted text-sm">4 New Messages</span>
            </a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item text-sm">
              <img src="https://placeholder.pics/150x150" alt="User Image" class="img-circle mr-2">
              <p class="font-weight-bold">
                Mark
                <span class="float-right text-muted text-sm">5 mins</span>
              </p>
              <p>The asset files of AdminLTE design are great. Keep up the good work!</p>
            </a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item text-sm">
              <img src="https://placeholder.pics/150x150" alt="User Image" class="img-circle mr-2">
              <p class="font-weight-bold">
                John Doe
                <span class="float-right text-muted text-sm">1 hour</span>
              </p>
              <p>I was wondering if you could meet for an appointment at 3:00 PM. They are in London but will be...</p>
            </a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item text-center text-muted text-sm">
              <b>See All Messages</b>
            </a>
          </div>
        </li>
        <!-- Notifications Dropdown Menu -->
        <li class="nav-item dropdown">
          <a class="nav-link" data-toggle="dropdown" href="#">
            <i class="far fa-bell"></i>
            <span class="badge badge-warning navbar-badge">15</span>
          </a>
          <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
            <span class="dropdown-header">15 Notifications</span>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">
              <i class="fas fa-envelope mr-2"></i> 4 new messages
              <span class="float-right text-muted text-sm">3 mins</span>
            </a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item">
              <i class="fas fa-users mr-2"></i> 8 friend requests
              <span class="float-right text-muted text-sm">12 hours</span>
            </a>
            <div class="dropdown-divider"></div>
            <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
            <i class="fas fa-th-large"></i>
          </a>
        </li>
      </ul>
    </nav>

    <!-- Sidebar -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
      <!-- Sidebar brand -->
      <a href="index3.html" class="brand-link">
        <img src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.2.0/brand/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
        <span class="brand-text font-weight-light">Admin-LTE</span>
      </a>

      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-item">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Dashboard
                <span class="right badge badge-danger">New</span>
              </p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-users"></i>
              <p>
                Users
                <span class="right badge badge-danger">New</span>
              </p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-table"></i>
              <p>
                Tables
                <span class="right badge badge-info">New</span>
              </p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-chart-bar"></i>
              <p>
                Charts
                <span class="right badge badge-primary">New</span>
              </p>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-envelope"></i>
              <p>
                Mail
                <span class="right badge badge-danger">New</span>
              </p>
            </a>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <div class="content-header">
        <div class="container-fluid">
          <div class="row mb-2">
            <div class="col-sm-6">
              <h1 class="m-0 text-dark">Dashboard</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active">Dashboard v1</li>
              </ol>
            </div><!-- /.col -->
          </div><!-- /.row -->
        </div><!-- /.container-fluid -->
      </div>
      <!-- /.content-header -->

      <!-- Main content -->
      <section class="content">
        <div class="container-fluid">
          <div class="row">
            <div class="col-lg-3 col-6">
              <!-- small box -->
              <div class="small-box bg-info">
                <div class="inner">
                  <h3>150</h3>
                  <p>New Orders</p>
                </div>
                <div class="icon">
                  <i class="ion ion-bag"></i>
                </div>
                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
              </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-6">
              <!-- small box -->
              <div class="small-box bg-success">
                <div class="inner">
                  <h3>50</h3>
                  <p>Products Sold</p>
                </div>
                <div class="icon">
                  <i class="ion ion-stats-bars"></i>
                </div>
                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
              </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-6">
              <!-- small box -->
              <div class="small-box bg-warning">
                <div class="inner">
                  <h3>50</h3>
                  <p>Users Registered</p>
                </div>
                <div class="icon">
                  <i class="ion ion-person-add"></i>
                </div>
                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
              </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-6">
              <!-- small box -->
              <div class="small-box bg-danger">
                <div class="inner">
                  <h3>65</h3>
                  <p>Bounce Rate %</p>
                </div>
                <div class="icon">
                  <i class="ion ion-pie-graph"></i>
                </div>
                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
              </div>
            </div>
            <!-- ./col -->
          </div>
          <!-- /.row -->
        </div><!-- /.container-fluid -->
      </section>
      <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
      <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->

    <!-- Footer -->
    <footer class="main-footer">
      <div class="float-right d-none d-sm-block">
        <b>Version</b> 3.2.0
      </div>
      <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
    </footer>

    <!-- Add jQuery if it's not already included in the HTML file via a CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Add Admin-LTE App -->
    <script src="https://cdn.cdnhub.io/admin-lte/3.2.0/js/adminlte.min.js"></script>
  </div>
  <!-- ./wrapper -->

  <!-- REQUIRED SCRIPTS -->

  <!-- jQuery -->

  <!-- AdminLTE App -->
</body>
</html>

Select version:

https://cdn.cdnhub.io/admin-lte/3.2.0/css/adminlte.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/adminlte.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/adminlte.min.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/adminlte.min.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.components.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.components.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.components.min.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.components.min.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.core.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.core.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.core.min.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.core.min.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.extra-components.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.extra-components.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.extra-components.min.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.extra-components.min.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.light.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.light.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.light.min.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.light.min.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.pages.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.pages.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.pages.min.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.pages.min.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.plugins.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.plugins.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.plugins.min.css Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/css/alt/adminlte.plugins.min.css.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/AdminLTELogo.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/avatar.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/avatar2.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/avatar3.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/avatar4.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/avatar5.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/boxed-bg.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/boxed-bg.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/credit/american-express.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/credit/cirrus.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/credit/mastercard.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/credit/paypal.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/credit/paypal2.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/credit/visa.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/default-150x150.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/icons.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/photo1.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/photo2.png Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/photo3.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/photo4.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/prod-1.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/prod-2.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/prod-3.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/prod-4.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/prod-5.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/user1-128x128.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/user2-160x160.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/user3-128x128.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/user4-128x128.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/user5-128x128.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/user6-128x128.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/user7-128x128.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/img/user8-128x128.jpg Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/js/adminlte.js Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/js/adminlte.js.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/js/adminlte.min.js Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/js/adminlte.min.js.map Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/js/demo.js Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/js/demo.min.js Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/js/pages/dashboard.js Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/js/pages/dashboard.min.js Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/js/pages/dashboard2.js Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/js/pages/dashboard2.min.js Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/js/pages/dashboard3.js Copied!

https://cdn.cdnhub.io/admin-lte/3.2.0/js/pages/dashboard3.min.js Copied!

All versions

2.1.0-alpha-1 2.2.0 2.2.1 2.3.0 2.3.1 2.3.11 2.3.2 2.3.3 2.3.4 2.3.5 2.3.6 2.3.7 2.3.8 2.4.0 2.4.10 2.4.11 2.4.12 2.4.15 2.4.16 2.4.17 2.4.18 2.4.2 2.4.3 2.4.4 2.4.5 2.4.6 2.4.7 2.4.8 2.4.9 3.0.0 3.0.0-alpha 3.0.0-alpha.2 3.0.0-beta.1 3.0.0-beta.2 3.0.0-rc.1 3.0.0-rc.2 3.0.0-rc.3 3.0.0-rc.4 3.0.0-rc.5 3.0.0-rc.6 3.0.1 3.0.2 3.0.3 3.0.4 3.0.5 3.1.0 3.1.0-rc *** 3.2.0 3.2.0-rc 4.0.0-alpha1 4.0.0-alpha2 4.0.0-alpha3