Documentation

Installation

Installation is as simple as downloading the files from the BootAdmin Github Repo and including them in your project.

The following CSS assets are required:

  • css/bootstrap.min.css
  • css/fontawesome-all.min.css
  • css/bootadmin.min.css

The following JS assets are required:

  • js/jquery.min.js
  • js/bootstrap.bundle.min.js
  • js/bootadmin.min.js

You must also include the webfonts folder for FontAwesome to work:

  • webfonts/*

The following assets are optional if you want to use their functionality:

  • datatables.min.*
  • moment.min.js (if using fullcalendar)
  • fullcalendar.min.*
Starter Template

You can check out the source code of the starter template, or copy and paste the following code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
    <link rel="stylesheet" href="css/bootadmin.min.css">

    <title>BootAdmin</title>
</head>
<body class="bg-light">

<nav class="navbar navbar-expand navbar-dark bg-primary">
    <a class="sidebar-toggle mr-3" href="#"><i class="fa fa-bars"></i></a>
    <a class="navbar-brand" href="#">BootAdmin</a>

    <div class="navbar-collapse collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-envelope"></i> 5</a></li>
            <li class="nav-item"><a href="#" class="nav-link"><i class="fa fa-bell"></i> 3</a></li>
            <li class="nav-item dropdown">
                <a href="#" id="dd_user" class="nav-link dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> John Doe</a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dd_user">
                    <a href="#" class="dropdown-item">Profile</a>
                    <a href="#" class="dropdown-item">Logout</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

<div class="d-flex">
    <div class="sidebar sidebar-dark bg-dark">
        <ul class="list-unstyled">
            <li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>
            <li>
                <a href="#sm_expand_1" data-toggle="collapse">
                    <i class="fa fa-fw fa-link"></i> Expandable Menu Item
                </a>
                <ul id="sm_expand_1" class="list-unstyled collapse">
                    <li><a href="#">Submenu Item</a></li>
                    <li><a href="#">Submenu Item</a></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>
            <li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>
            <li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>
        </ul>
    </div>

    <div class="content p-4">
        <h2 class="mb-4">Blank/Starter</h2>

        <div class="card mb-4">
            <div class="card-body">
                This is a blank page you can use as a starting point.
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootadmin.min.js"></script>

</body>
</html>
Usage

It is important to note that BootAdmin utilizes Bootstrap 4 and FontAwesome 5 Free. Anything that is possible with these frameworks is possible with BootAdmin.

You can also optionally use a couple of additional libraries such as Datatables and Fullcalendar.

Please see the docs for each in order to learn what you can do:

Changing Colors etc.

Adjusting things like the primary color to something other than the default Bootstrap 4 blue is simple.

You can use SASS, or this awesome Bootstrap.build tool to adjust and compile using the colors you want.

Then you can use your own bootstrap.min.css file instead of the one that comes with BootAdmin.

The same logic applies for things like fonts. To use Google Fonts, just include the CSS and add the font family to your own custom CSS.

Navbar

The top navbar uses Bootstrap 4 Code. See the Bootstrap 4 Navbar Docs for more information.

Changing colors is as simple as using classes like navbar-dark and bg-dark. Or for a lighter scheme, you can try navbar-light and bg-light.

Sidebar
Styling

The sidebar colors can be customized just as easily as the navbar.

Simply use classes like sidebar-dark and bg-dark. Or for a lighter scheme, you can try sidebar-light and bg-light.

Menu Items

BootAdmin supports single-level and multi-level collapsing menu items.

For single-level menu items, simply use:

<li><a href="#"><i class="fa fa-fw fa-link"></i> Menu Item</a></li>

For multi-level collapsing menu items, use:

<li>
    <a href="#sm_expand_1" data-toggle="collapse">
        <i class="fa fa-fw fa-link"></i> Expandable Menu Item
    </a>
    <ul id="sm_expand_1" class="list-unstyled collapse">
        <li><a href="#">Submenu Item</a></li>
        <li><a href="#">Submenu Item</a></li>
    </ul>
</li>

Note that each multi-level menu item must have a unique identifier e.g. sm_expand_1.

To set a menu item to appear as active, simply add the .active class to the menu item li.

In order to set pre-expanded active multi-level items, use the following code:

<li>
    <a href="#sm_expand_1" data-toggle="collapse" aria-expanded="true">
        <i class="fa fa-fw fa-link"></i> Expandable Menu Item
    </a>
    <ul id="sm_expand_1" class="list-unstyled collapse show">
        <li class="active"><a href="#">Submenu Item</a></li>
        <li><a href="#">Submenu Item</a></li>
    </ul>
</li>

Note the use of aria-expanded="true", .show, and .active.

Width & Height

If your navbar changes in height you will have to adjust the sidebar CSS using your own custom CSS file accordingly:

.sidebar {
    min-width: 230px;
    max-width: 230px;
    min-height: calc(100vh - 49px);
}
.sidebar.toggled {
    margin-left: -230px;
}

@media (max-width: 768px) {
    .sidebar {
        margin-left: -230px;
    }
}

You would simply change 49px to the new height of your navbar.

You can also optionally change 230px to the width you want your sidebar to be.

Issues & Support

Please use the BootAdmin Github Issues for bug reports, questions, and support.