Get started with startbootstrap-sb-admin-2 CDN
MIT licensed
StartBootstraps SB Admin 2 is a free, responsive, and modern admin theme for Bootstrap.
Tags:- bootstrap
- theme
Stable version
Copied!
How to start using startbootstrap-sb-admin-2 CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with startbootstrap-sb-admin-2 CDN - cdnhub.io</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.cdnhub.io/startbootstrap-sb-admin-2/4.1.4/css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Content -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="d-flex align-items-center justify-content-center sidebar-brand d-flex flex-column" href="index.html">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-laugh-wink"></i>
</div>
<div class="sidebar-brand-text mx-3">SB Admin 2</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="index.html">
<i class="fas fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Addons
</div>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 px-3">
<a class="text-decoration-none text-gray-700" href="login.html">Login Page</a>
<a class="text-decoration-none text-gray-700" href="register.html">Register Page</a>
<a class="text-decoration-none text-gray-700" href="404.html">404 Page</a>
</div>
</div>
</li>
<!-- Nav Item - Charts -->
<li class="nav-item">
<a class="nav-link" href="charts.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Charts</span>
</a>
</li>
<!-- Nav Item - Tables -->
<li class="nav-item">
<a class="nav-link" href="tables.html">
<i class="fas fa-fw fa-table"></i>
<span>Tables</span>
</a>
</li>
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Nav Item - Messages -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-envelope fa-fw"></i>
<!-- Counter - Messages -->
<span class="badge badge-danger badge-counter">7</span>
</a>
<!-- Dropdown - Messages -->
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">Message Center</h6>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image me-3">
<img class="rounded-circle" src="img/undraw_profile_1.svg" alt="...">
<div class="status-indicator">
<i class="fas fa-dot fa-fw text-success"></i>
</div>
</div>
<div class="dropdown-list-content">
<p class="mb-2">Hey there! I was wondering if you wanted to meet for lunch.</p>
<p class="text-muted small mb-0">Message sent 5 mins ago</p>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image me-3">
<img class="rounded-circle" src="img/undraw_profile_2.svg" alt="...">
<div class="status-indicator">
<i class="fas fa-dot fa-fw text-warning"></i>
</div>
</div>
<div class="dropdown-list-content">
<p class="mb-2 text-muted">1 new message in the inbox</p>
<p class="mb-2">Message sent 25 minutes ago</p>
<p>Preview message goes here</p>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
</div>
</li>
<!-- Nav Item - Alerts -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bell fa-fw"></i>
<!-- Counter - Alerts -->
<span class="badge badge-danger badge-counter">3</span>
</a>
<!-- Dropdown - Alerts -->
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
<h6 class="dropdown-header">Alert Center</h6>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image me-3">
<div class="status-indicator">
<i class="fas fa-exclamation-triangle fa-fw text-warning"></i>
</div>
</div>
<div class="dropdown-list-content">
<p class="mb-2">Warning: <strong>Low stock levels</strong> - Get more amentities.</p>
<p class="text-muted small mb-0">2 mins ago</p>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image me-3">
<div class="status-indicator">
<i class="fas fa-exclamation-triangle fa-fw text-success"></i>
</div>
</div>
<div class="dropdown-list-content">
<p class="mb-2">Success: <strong>New user registered</strong></p>
<p class="text-muted small mb-0">5 mins ago</p>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">View All</a>
</div>
</li>
<!-- Nav Item - Messages -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-envelope fa-fw"></i>
<!-- Counter - Messages -->
<span class="badge badge-danger badge-counter">7</span>
</a>
<!-- Dropdown - Messages -->
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">Message Center</h6>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image me-3">
<img class="rounded-circle" src="img/undraw_profile_1.svg" alt="...">
<div class="status-indicator">
<i class="fas fa-dot fa-fw text-success"></i>
</div>
</div>
<div class="dropdown-list-content">
<p class="mb-2">Hey there! I was wondering if you wanted to meet for lunch.</p>
<p class="text-muted small mb-0">Message sent 5 mins ago</p>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image me-3">
<img class="rounded-circle" src="img/undraw_profile_2.svg" alt="...">
<div class="status-indicator">
<i class="fas fa-dot fa-fw text-warning"></i>
</div>
</div>
<div class="dropdown-list-content">
<p class="mb-2 text-muted">1 new message in the inbox</p>
<p class="mb-2">Message sent 25 minutes ago</p>
<p>Preview message goes here</p>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
<i class="fas fa-user fa-fw"></i>
Settings
</a>
</li>
</ul>
</nav>
<!-- End of Topbar -->
<!-- Content Row -->
<div class="container-fluid">
<!-- Earnings (Monthly) Card Example -->
<div class="row">
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Earnings (Monthly)</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$40,000</div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Sales</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$112,590</div>
</div>
<div class="col-auto">
<i class="fas fa-cart-plus fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">Customers</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">125</div>
</div>
<div class="col-auto">
<i class="fas fa-users fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Projects</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">50</div>
</div>
<div class="col-auto">
<i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center w-100 small">
<span>Copyright © Your Website 2023</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="https://cdn.cdnhub.io/startbootstrap-sb-admin-2/4.1.4/js/sb-admin-2.min.js"></script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!