How to build the Bootstrap 5 admin template? [Tutorial]

This post was originally published at https://www.blog.duomly.com/how-to-build-bootstrap-admin-template-tutorial/

Into to building a Bootstrap admin template

Last week I published an article about Bootstrap 5, where we showed you how to build a simple portfolio web page, and it seems like a lot of you really like it.

That’s why today I decided to prepare you a new Bootstrap tutorial, where we are going to build a Bootstrap 5 admin template for the blog management application, step by step.

Also, if you’d like to build a dashboard with Bootstrap 4, remember to check out our previous tutorial here.

For today’s tutorial, you will need three images, one logo, one user image, and one image you like. Also, Bootstrap 5 documentation can help understand what’s going on.

P.S. Of course, I’ve got a video tutorial, where you can go through the building process with me. So, if you like coding with Youtube, or prefer to watch then read, join me here.

[VIDEO]

Let’s start!

1. How to start the Bootstrap template?

We’ve already spoken in the previous article about starting the Bootstrap project, but to not make it complicated, let’s repeat the steps, so you’ll remember how to do it.

Let’s start by creating a folder for our admin template. Inside the folder, you need to create a simple index.html file, and there we are going to implement CDNs with Bootstrap files. Besides that, I’ll also add the styles.css file, which we will create in a second.

<!DOCTYPE>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Admin Panel UI</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles.css" />
    <!-- JavaScript and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
  </head>

  <body></body>
</html>

Ok, when that’s ready, let’s go and create the styles.css file in the same folder. We will use it for the custom styles for our admin template.

2. How to build horizontal navigation in Bootstrap?

Now, we can start creating the first elements of our admin template. In this project, we will have two navigations, one horizontal and one vertical.

Let’s start by creating the horizontal one first, and inside the body tags, let’s add the following code.

<!-- Top Nav -->
<nav class="py-3 px-4 navbar navbar-expand-lg auto-hiding-navbar fixed-top">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse d-flex" id="navbarSupportedContent">          
    <form class="search-form d-flex ml-auto mt-1 mb-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
    </form>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Hello Admin
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">User Settings</a>
          <a class="dropdown-item" href="#">Create New Account</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Logout</a>
      </li>
    </ul>
  </div>
</nav>  
<!-- End Top Nav   -->

Great, we have the first element ready, so we need to make some custom styling. Let’s open the styles.css file, and let’s add a few lines of CSS.

body {
  background: #f6f6f6;
  height: 100vh;
}
nav {
  background-color: white;
}
.search-form {
  width: 50%;
}

Great! Let’s now add the vertical navigation.

3. How to add vertical navigation in Bootstrap?

In most dashboards or admin templates, the vertical menu is a very common feature, so that we will add one in our admin template.

Let’s go to the index.html file and add the following code.

<div class="row">
  <!-- Sidebar -->
  <div class="col-1">
    <nav id="sidebar" class="col sidebar">
      <a class="navbar-brand" href="#">
        <img src="./assets/logo.png" alt="logo" class="logo" />
      </a>
      <ul class="nav flex-column vertical-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-house-door-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.5 10.995V14.5a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V11c0-.25-.25-.5-.5-.5H7c-.25 0-.5.25-.5.495z"/>
            <path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
            </svg>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-file-post" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4z"/>
              <path d="M4 5.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-7z"/>
              <path fill-rule="evenodd" d="M4 3.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
            </svg>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z"/>
              <path fill-rule="evenodd" d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z"/>
            </svg>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bar-chart-line-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <rect width="4" height="5" x="1" y="10" rx="1"/>
            <rect width="4" height="9" x="6" y="6" rx="1"/>
            <rect width="4" height="14" x="11" y="1" rx="1"/>
            <path fill-rule="evenodd" d="M0 14.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z"/>
            </svg>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chat-left-dots" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v11.586l2-2A2 2 0 0 1 4.414 11H14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
              <path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
            </svg>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <!-- End Sidebar  -->

In this section, we used Bootstrap icons, so feel free to take a look at the Bootstrap icons section.

Besides that, I used here the first image, logo.png.

Now, it’s time to make some styling to make our vertical navigation good looking.

#sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  box-shadow: -1px 0 0 rgba(0, 0, 0, .1);
  max-width: 10vw;
}

#sidebar .nav-item {
  text-align: center;
  padding: 25px 0;
}

#sidebar .nav-item a {
  color: rgba(0,0,0,.2);
}

#sidebar .nav-item a.active { 
  color: #0d6efd;
}

.vertical-nav {
  margin-top: 20vh;
}

.logo {
  max-height: 30px;
  margin: 15px 25px;
}

a.navbar-brand {
  text-align: center;
  width: 100%;
  display: block;
}

Great, one of the most significant elements of the dashboard is ready. Let’s got to the main page of our admin template.

4. Building sections in the admin template

When the navigations are ready, we can start planning what we are going to put inside the main page of our admin dashboard.

We will add two rows, with five cards to the main page of our admin template. The first element we are going to put in is a card with recently published posts.

Let’s add the code.

<div class="main col-11">
  <div class="row first-row">
    <div class="col-4">
      <section id="recently-posted">
        <div class="card">
          <div class="card-header">
            Recently Published Posts 
          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item">
              <div class="row g-0">
                <div class="col-md-3">
                  <img src="./assets/post1.jpeg"  alt="Post One Photo" class="img-fluid rounded-lg">
                </div>
                <div class="col-md-9">
                  <div class="card-body">
                    <h6 class="card-title">Lorem ipsum dolor sit amet...</h6>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                    <p class="card-text"><small class="text-muted">Added 3 days ago</small></p>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="row g-0">
                <div class="col-md-3">
                  <img src="./assets/post1.jpeg"  alt="Post One Photo" class="img-fluid rounded-lg">
                </div>
                <div class="col-md-9">
                  <div class="card-body">
                    <h6 class="card-title">Lorem ipsum dolor sit amet...</h6>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                    <p class="card-text"><small class="text-muted">Added 3 days ago</small></p>
                  </div>
                </div>
              </div>
            </li>
            <li class="list-group-item">
              <div class="row g-0">
                <div class="col-md-3">
                  <img src="./assets/post1.jpeg"  alt="Post One Photo" class="img-fluid rounded-lg">
                </div>
                <div class="col-md-9">
                  <div class="card-body">
                    <h6 class="card-title">Lorem ipsum dolor sit amet...</h6>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                    <p class="card-text"><small class="text-muted">Added 3 days ago</small></p>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </section>
    </div>

In this code, we used the second photo, so remember to add the photo with your path and file name.

The first section is there, and that’s also the time to add another column to this row with another section. We will take care of the styling after all elements are available.

Inside the row div, and below the col-4 let’s add the next sections - statistics.

  <div class="col-8">
    <section id="statistics">
      <div class="card">
        <div class="card-header">
          Statisctics
        </div>
          <div class="stats py-3 px-4">
            <div class="py-4">
              <div class="progress">
                <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 57%" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <p class="card-text">Visited the blog</p>
            </div>
            <div class="py-4">
              <div class="progress">
                <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <p class="card-text">Read posts</p>
            </div>
            <div class="py-4">
              <div class="progress">
                <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <p class="card-text">Subscribed to the newsletter</p>
            </div>
            <div class="py-4">
              <div class="progress">
                <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <p class="card-text">Subscribed to the newsletter</p>
            </div>
          </div>
      </div>
    </section>
  </div>

The first row of the admin panel is there, not styled yet, but we will jump into styling while we will have all the elements.

That’s why we need to add the missing row of our admin template.

Let’s create the second row, just when the first row tag closes, and let’s add the third element, which is a card with the latest comments.

<div class="row second-row">
  <div class="col-4">
    <section id="recently-commented">
      <div class="card">
        <div class="card-header">
          Latest comments
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">
            <div class="row g-0">
              <div class="col">
                <div class="card-body">
                  <h6 class="card-title">Username</h6>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. <small class="text-muted">Added 3 days ago</small></p>
                </div>
              </div>
            </div>
          </li>
          <li class="list-group-item">
            <div class="row g-0">
              <div class="col">
                <div class="card-body">
                  <h6 class="card-title">Username</h6>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. <small class="text-muted">Added 3 days ago</small></p>
                </div>
              </div>
            </div>
          </li>
          <li class="list-group-item">
            <div class="row g-0">
              <div class="col">
                <div class="card-body">
                  <h6 class="card-title">Username</h6>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. <small class="text-muted">Added 3 days ago</small></p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </section>
  </div>
</div>

Another card is there, so the admin can see the newest comments that were done on the blog.

There are still two more cards that we will add. The next one will be the simple form where notes can be typed and saved for later.

So, still inside the <div class=„row second-row”> let’s add another column with section.

<div class="col-5">
  <section id="notes-form">
    <div class="card">
      <div class="card-header">
        Write a note
      </div>
      <div class="card-body px-4">
        <form>
          <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Your Note</label>
            <textarea rows=7 class="form-control"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Save</button>
        </form>
      </div>
    </div>
  </section>
</div>

Now, we can add the last element, which is a card with the most active user. In this card, we will use the user image and badge to show the number of comments that the user did in the selected time.

Still inside the <div class=„row second-row”> let’s add the last element.

<div class="col">
  <section id="active-user">
    <div class="card mt-2">
      <div class="card-header">
        Most Active User
      </div>
      <div class="card-body text-center">
        <div class="img-container mb-4">
          <img src="./assets/user.jpeg" class="card-img-top" alt="User">
        </div>
        <h6 class="card-title mb-4">John Doe</h6>
        <p class="card-text">Commented <span class="badge bg-light text-dark">198</span> times</p>
        <p class="card-text">Posted <span class="badge bg-light text-dark">12</span> articles</p>
      </div>
    </div>
  </section>
</div>

If all the elements are there, let’s go to our styles.css file, and let’s make it look good!

5. Styling elements

Now your admin template may look a little bit messy because we need to set some more paddings, margins, and sizes!

Let’s open the styles.css file, and let’s add a few lines of CSS code.

section {
  margin: 10px;
}
.main {
  padding: 2rem;
  padding-top: calc(4rem + 74px)
}
.main .first-row, .main .second-row {
  padding-bottom: 3rem;
}
.main .row .card {
  height: 100%;
}
.card {
  border: 0;
  box-shadow: 2px 0 10px rgba(0, 0, 0, .1);
  max-height: 100%;
}
.card-header {
  background: white;
  font-weight: 700;
  padding: 20px;
}
.card-body {
  padding: 0.5rem;
  font-size: 12px;
}
#recently-posted .card img {
  padding-top: 0.5rem;
}
.stats .card-text {
  padding-top: 5px;
  padding-left: 2px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
}
.img-container {
  height: 120px;
  width: 120px;
  text-align: center;
  margin: auto;
  display: block;
  margin-top: 20px;
}
.card-img-top {
  height: 100%;
  width: 100%;
  border-radius: 100%;
}
.badge {
  font-size: 18px;
}

And voila! Our admin template is ready! Here’s how it should look like!

How to build Bootstrap admin template tutorial - Result

Congratulations!

Conclusion

We’ve just created another project using Bootstrap 5! So, now you know how to build a simple web page and also how to create an admin template.

If you didn’t read the first tutorial about Bootstrap 5, where you can also find out what’s new in this version, check here:

How to Create a Simple Web Page Using Bootstrap 5

If you’d like to take a look at the dashboard that we’ve done with Bootstrap 4, check it here:
How to Build Dashboard With Bootstrap Tutorial

Besides that, feel free to join us at Duomly where we have a Bootstrap course, where you can learn how to build an e-commerce.

Thank you for reading,
Anna from Duomly

#web-development #html5 #css #html #css3 #bootstrap

What is GEEK

Buddha Community

How to build the Bootstrap 5 admin template? [Tutorial]

Nayan Dalwadi

1611146455

DashboardKit - Bootstrap 5 Admin Template

DashboardKit Bootstrap 5 Admin Template

Free Download - download

Premium - click here

Live Preview – Video

Embed Video –
<iframe width="560" height="315" src="https://www.youtube.com/embed/X1EpcZXcD6A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Preview Product Demo

Why DashboardKit?
DashboardKit is a Bootstrap 5 based Admin Template that comes with 170+ ready to use conceptual pages. We have made DashboardKit a really powerful backend template with having tons of UI components, form elements, charts, tables along with 7+ admin panels.
• Developer centric : Even a novice developer can customize the DashboardKit. Our code is readable and well optimized for any level of developer.
• Modern design : User experience is the major important part in DashboardKit. We’ve designed each page with conceptual user interface.
• Performance first : Code is handwritten from scratch & doing that we’ve achieved the best performance in DashboardKit.
• Well documented : Detailed documentation guide contains- Quick setup, Integrate into an existing project, How to use components, references, and changelog.
• Responsive : DashboardKit’s design renders fast & perfect on desktop, tablet & mobile without any lagging issue.
• Browsers Compatiblity : DashboardKit is well tested in Chrome, Firefox, Safari(macOS) , Edge & Internet Explorer(>=IE11).
• Regular updates : Any bug fixes, new features, improvements in DashboardKit will always free.
• Support : You can submit us the issues or any new feature request via our email support dashboardkit[at]gmail[dot]com.

Technology Stack
• Bootstrap : Most popular design framework for developing responsive and mobile-first websites.
• Sass : Sass is a preprocessor scripting language that is interpreted or compiled into CSS.
• npm/Gulp : Node Package Manager with Gulp build system for the fast development.

Features
DashboardKit free Bootstrap 5 admin template includes the basic layouts with below listed pages. For more features, please checkout pro version.

• Analytics Dashboard
• All Basic Bootstrap components
• 250+ Feather Icons
• Form Elements
• Bootstrap Basic Table
• Apex charts
• Google Map
• Login/Registration Pages
• Sample Page

We Solved your pain points?
You have seen lots of other admin templates but Is it really convenient for you? Has it resolve all your below pain points? We’re closely working on dashboard making since 2013 & we know the real pain points of our customer base.
• Hassle to start : Quickstart guide for start with DashboardKit. We also cover how to implement DashboardKit into your existing project with minimal effort. Guide for Quickstart
• Hard code structure : DashboardKit has a fully structured code with a well-commented guide that helps to ease your development.
• Hard to buid : We used Gulp build process for minification of CSS/Javascript files, the flexibility of repetitive workflows and compose them into efficient build pipelines. Check our Gulp helper guide.
• Components useability : You can easily access & use the DashboardKit’s all components using one-click code copy/paste mechanism. It will surely save your time.
• Responsive issues : Proper bug-free responsive design is a key factor for any project. DashboardKit is well optimized for that.
• Messy documentation : Simple easy to understand Documentation covers all aspects of setup, components guide, reference links, changelog.

Upgrated to Pro DashboardKit
For more Pages, UI components, forms variants & access to 7+ admin panels check out the Premium version of DashboardKit Bootstrap 5 Admin Template.

Documentation
DashboardKit documentation helps you in all aspects related to setup, how to use components, plugins references & changelog. Please refer this link.

Support
For support please contact us on dashboardkit[at].gmail[dot]com.

#dashboardkit #bootstrap 5 admin template #bootstrap admin template #admin dashboard #admin template #bootstrap

Zoltan Szogyenyi

1598883697

Bootstrap 5 tutorial: how to build a simple admin dashboard interface

Almost 2 months ago Bootstrap 5 alpha has been launched and there are two big news: jQuery has been dropped as a dependency and there is no more direct support for IE 10/11. We’ve been playing around with the new version of the framework and it is exciting to see some features such as the Utility API and working with vanilla JS.

Simple Bootstrap 5 Admin Dashboard Preview

In today’s tutorial, I would like to show you guys how to create a really simple admin dashboard interface using Bootstrap 5. Here’s an online demo if you want to check it out before building it. You’ll create the following sections:

A navigation bar with user settings;
A sidebar with navigation items;
A section to show the title, tagline, and breadcrumbs for the current page;
The main content area with a couple of widget cards;
Last of but not least a footer.

#tutorial #bootstrap5 #bootstrap-5 #bootstrap-5-dashboard #bootstrap-5-tutorial

Zoltan Szogyenyi

1598221151

Volt - Free Bootstrap 5 Admin Dashboard

Volt is a free and open source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages and 3 customized plugins. Volt does not require jQuery as a dependency meaning that every library and script’s are jQuery free.

Bootstrap 5 Components

Because it is created using the latest version of Bootstrap 5, every components and element is based on the latest Bootstrap 5 Sass variables and HTML markup. Check out the documentation of the components here.

11 Example pages

We created no less than 11 advanced example pages such as the overview page, transactions, user settings, sign in and sign up and many more.

Full documentation

Every component, plugin and getting started is thoroughly documented on our online documentation.

Workflow

This product is built using the following widely used technologies:

Most popular CSS Framework Bootstrap
Productive workflow tool Gulp
Awesome CSS preprocessor Sass

Demo
Quick Start
Documentation
File Structure
Browser Support
Resources
Reporting Issues
Technical Support or Questions
Licensing
Useful Links

Demo

Dashboard	Transactions	Settings	Forms

Sign in	Sign up	Forgot password	Reset password

Lock Profile	404 Not Found	500 Server Error	Documentation

Quick start

Download from Themesberg or clone this repository
Download the project’s zip
Make sure you have Node locally installed.
Download Gulp Command Line Interface to be able to use gulp in your Terminal.

npm install gulp-cli -g

After installing Gulp, run npm install in the main volt/ folder to download all the project dependencies. You’ll find them in the node_modules/ folder.

npm install

Run gulp in the volt/ folder to serve the project files using BrowserSync. Running gulp will compile the theme and open /index.html in your main browser.

gulp

While the gulp command is running, files in the assets/scss/, assets/js/ and components/ folders will be monitored for changes. Files from the assets/scss/ folder will generate injected CSS.

Hit CTRL+C to terminate the gulp command. This will stop the local server from running.

Theme without Sass, Gulp or Npm

If you’d like to get a version of our theme without Sass, Gulp or Npm, we’ve got you covered. Run the following command:

gulp build:dev

This will generate a folder html&css which will have unminified CSS, Html and Javascript.

Minified version

If you’d like to compile the code and get a minified version of the HTML and CSS just run the following Gulp command:

gulp build:dist

This will generate a folder dist which will have minified CSS, Html and Javascript.

Documentation

The documentation for Volt is hosted on our website.

File Structure

Within the download you’ll find the following directories and files:

Volt Bootstrap 5 Admin Dashboard
.
├── README.md
├── gulpfile.js
├── package-lock.json
├── package.json
└── src
    ├── assets
    │   ├── img
    │   └── js
    ├── index.html
    ├── pages
    │   ├── components
    │   ├── dashboard
    │   ├── examples
    │   ├── settings.html
    │   ├── tables
    │   └── transactions.html
    ├── partials
    │   ├── _analytics.html
    │   ├── _footer.html
    │   ├── _head.html
    │   ├── _navigation.html
    │   ├── _pages-preview.html
    │   ├── _preloader.html
    │   ├── _scripts.html
    │   └── dashboard
    └── scss
        ├── volt
        └── volt.scss

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

Demo: https://demo.themesberg.com/volt/
Download Page: https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard
Documentation: https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/quick-start/
License Agreement: https://themesberg.com/licensing
Support: https://themesberg.com/contact
Issues: Github Issues Page

Reporting Issues

We use GitHub Issues as the official bug tracker for Volt Bootstrap 5 Admin Dashboard. Here are some advices for our users that want to report an issue:

Make sure that you are using the latest version of Volt Bootstrap 5 Admin Dashboard. Check the CHANGELOG from your dashboard on our website.
Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
Some issues may be browser specific, so specifying in what browser you encountered the issue might help.