CINXE.COM

<!doctype html> <html lang="en"> <head> <link rel="canonical" href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard"> <title>Volt - Bootstrap 5 Dashboard Template - Themesberg</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Volt is a free and open source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages and 3 customized plugin with Vanilla JS. Check the live demo and join over 89493 developers using our products."> <meta name="author" content="Themesberg"> <meta name="csrf-token" content="mUV3EbhO0tmzoY8acZPRoHWSRtP2wdL90VFMpYGT"> <meta name="image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/volt-bootstrap-5-dashboard-preview.jpg"> <meta name=”robots” content="index, follow"> <meta name="twitter:title" content="Volt - Bootstrap 5 Dashboard Template"> <meta name="twitter:url" content="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard"> <meta name="twitter:description" content="Volt is a free and open source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages and 3 customized plugin with Vanilla JS. Check the live demo and join over 89493 developers using our products."> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@themesberg"> <meta name="twitter:creator" content="@themesberg"> <meta name="twitter:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/volt-bootstrap-5-dashboard-preview.jpg"> <meta property="og:type" content="og:product" /> <meta property="og:title" content="Volt - Bootstrap 5 Dashboard Template"> <meta property="og:description" content="Volt is a free and open source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages and 3 customized plugin with Vanilla JS."> <meta property="og:url" content="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard"> <meta property="og:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/volt-bootstrap-5-dashboard-preview.jpg"> <meta property="product:brand" content="Themesberg"> <meta property="product:availability" content="in stock"> <meta property="product:condition" content="new"> <meta property="product:price:amount" content="0"> <meta property="product:price:currency" content="USD"> <meta property="product:retailer_item_id" content="volt-bootstrap-5-dashboard"> <meta property="product:item_group_id" content="admin-dashboard_volt-bootstrap-5-dashboard"> <meta property="fb:app_id" content="2440134909584662" /> <link rel="apple-touch-icon" sizes="180x180" href="https://themesberg.com/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://themesberg.com/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://themesberg.com/favicon-16x16.png"> <link rel="manifest" href="https://themesberg.com/site.webmanifest"> <link rel="mask-icon" href="https://themesberg.com/safari-pinned-tab.svg" color="#ff7f66"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="theme-color" content="#ffffff"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" /> <link type="text/css" href="https://themesberg.com/css/themesberg.css" rel="stylesheet"> <script src="https://cdn.usefathom.com/script.js" data-site="ZLGNUJDJ" defer></script> </head> <body> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-THQTXJ7" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <header> <nav class="navbar navbar-expand-lg navbar-light bg-soft navbar-light"> <div class="container"> <a class="navbar-brand mr-lg-4" href="https://themesberg.com"> <div class="d-flex align-items-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 64"> <defs> <style> .class-1 { fill: #ff7f66; } .class-2, .class-4 { fill: #2a344f; } .class-2 { opacity: 0.32; isolation: isolate; } .class-3 { opacity: 0.16; } </style> </defs> <title>logo</title> <g id="Layer_2" data-name="Layer 2"> <g id="Layer_1-2" data-name="Layer 1"> <g id="Group_16" data-name="Group 16"> <g id="Group_15" data-name="Group 15"> <g id="Group_12" data-name="Group 12"> <path id="Path_35" data-name="Path 35" class="class-1" d="M53.52,1.87l-22,5.39a1.61,1.61,0,0,1-1.23-.21L19.89.25a1.57,1.57,0,0,0-1.3-.19l-18,5.3A.77.77,0,0,0,0,6.09V16.87L18.59,11.4a1.57,1.57,0,0,1,1.3.19l10.4,6.79a1.53,1.53,0,0,0,1.23.21L54,13.09V2.23a.39.39,0,0,0-.39-.38Z" /> <path id="Path_36" data-name="Path 36" class="class-1" d="M40.25,27.84l-8.73,2.1a1.57,1.57,0,0,1-1.23-.21l-10.4-6.8a.37.37,0,0,0-.53.11.31.31,0,0,0-.07.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.57,1.57,0,0,0,1.23.2l9.23-2.21A6.86,6.86,0,0,0,46,32.45v-.21a4.62,4.62,0,0,0-4.68-4.55A4.93,4.93,0,0,0,40.25,27.84Z" /> <path id="Path_37" data-name="Path 37" class="class-1" d="M40.25,50.52l-8.73,2.1a1.61,1.61,0,0,1-1.23-.21l-10.4-6.8a.38.38,0,0,0-.53.1.35.35,0,0,0-.07.21V56.15a.75.75,0,0,0,.34.63l10.66,7a1.53,1.53,0,0,0,1.23.21l9.23-2.22A6.84,6.84,0,0,0,46,55.13v-.21a4.62,4.62,0,0,0-4.68-4.55A4.39,4.39,0,0,0,40.25,50.52Z" /> </g> <path id="Path_38" data-name="Path 38" class="class-2" d="M30.86,41.29V30a1.63,1.63,0,0,0,.66,0L35.28,29l2.2,10.8-6,1.46A1.47,1.47,0,0,1,30.86,41.29Zm8.82,9.33-8.16,2a1.63,1.63,0,0,1-.66,0V64a1.63,1.63,0,0,0,.66,0l10.36-2.54Zm-8.82-32a1.63,1.63,0,0,0,.66,0l1.57-.38L30.86,7.28Z" /> <g id="Group_13" data-name="Group 13" class="class-3"> <path id="Path_39" data-name="Path 39" class="class-4" d="M19.29,11.36a1.82,1.82,0,0,1,.6.23l10.4,6.8a1.41,1.41,0,0,0,.57.22V7.27a1.41,1.41,0,0,1-.57-.22L19.89.25a1.82,1.82,0,0,0-.6-.23Z" /> <path id="Path_40" data-name="Path 40" class="class-4" d="M30.86,52.64a1.67,1.67,0,0,1-.57-.23l-10.4-6.8a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V56.15a.75.75,0,0,0,.34.63l10.66,7a1.73,1.73,0,0,0,.57.22Z" /> <path id="Path_41" data-name="Path 41" class="class-4" d="M19.89,22.93a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.58,1.58,0,0,0,.57.22V30a1.43,1.43,0,0,1-.57-.23Z" /> </g> </g> </g> </g> </g> </svg> <p class="ml-2 mb-0 logo-text "> Themesberg</p> </div> </a> <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 pt-3 pt-lg-0" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a href="https://themesberg.com/themes" class="nav-link">Themes</a> </li> <li class="nav-item"> <a href="https://themesberg.com/blog" class="nav-link">Blog</a> </li> <li class="nav-item"> <a href="https://themesberg.com/contact" class="nav-link">Contact</a> </li> </ul> <div class="d-flex align-items-center"> <div class="d-flex align-items-center"> <a href="https://themesberg.com/login" class="btn btn-sm btn-outline-primary mt-2 mt-lg-0" data-toggle="tooltip" data-placement="bottom" title="Join 89493 developers to access Free Themes"> <i class="fad fa-sign-in-alt mr-2"></i>Login/Register </a> </div> </div> </div> </div> </nav> </header> <nav class="navbar navbar-product navbar-expand-lg navbar-light bg-soft navbar-light" style="display: none"> <div class="container"> <a class="navbar-brand mr-lg-4" href="https://themesberg.com"> <div class="d-flex align-items-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 64"> <defs> <style> .class-1 { fill: #ff7f66; } .class-2, .class-4 { fill: #2a344f; } .class-2 { opacity: 0.32; isolation: isolate; } .class-3 { opacity: 0.16; } </style> </defs> <title>logo</title> <g id="Layer_2" data-name="Layer 2"> <g id="Layer_1-2" data-name="Layer 1"> <g id="Group_16" data-name="Group 16"> <g id="Group_15" data-name="Group 15"> <g id="Group_12" data-name="Group 12"> <path id="Path_35" data-name="Path 35" class="class-1" d="M53.52,1.87l-22,5.39a1.61,1.61,0,0,1-1.23-.21L19.89.25a1.57,1.57,0,0,0-1.3-.19l-18,5.3A.77.77,0,0,0,0,6.09V16.87L18.59,11.4a1.57,1.57,0,0,1,1.3.19l10.4,6.79a1.53,1.53,0,0,0,1.23.21L54,13.09V2.23a.39.39,0,0,0-.39-.38Z" /> <path id="Path_36" data-name="Path 36" class="class-1" d="M40.25,27.84l-8.73,2.1a1.57,1.57,0,0,1-1.23-.21l-10.4-6.8a.37.37,0,0,0-.53.11.31.31,0,0,0-.07.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.57,1.57,0,0,0,1.23.2l9.23-2.21A6.86,6.86,0,0,0,46,32.45v-.21a4.62,4.62,0,0,0-4.68-4.55A4.93,4.93,0,0,0,40.25,27.84Z" /> <path id="Path_37" data-name="Path 37" class="class-1" d="M40.25,50.52l-8.73,2.1a1.61,1.61,0,0,1-1.23-.21l-10.4-6.8a.38.38,0,0,0-.53.1.35.35,0,0,0-.07.21V56.15a.75.75,0,0,0,.34.63l10.66,7a1.53,1.53,0,0,0,1.23.21l9.23-2.22A6.84,6.84,0,0,0,46,55.13v-.21a4.62,4.62,0,0,0-4.68-4.55A4.39,4.39,0,0,0,40.25,50.52Z" /> </g> <path id="Path_38" data-name="Path 38" class="class-2" d="M30.86,41.29V30a1.63,1.63,0,0,0,.66,0L35.28,29l2.2,10.8-6,1.46A1.47,1.47,0,0,1,30.86,41.29Zm8.82,9.33-8.16,2a1.63,1.63,0,0,1-.66,0V64a1.63,1.63,0,0,0,.66,0l10.36-2.54Zm-8.82-32a1.63,1.63,0,0,0,.66,0l1.57-.38L30.86,7.28Z" /> <g id="Group_13" data-name="Group 13" class="class-3"> <path id="Path_39" data-name="Path 39" class="class-4" d="M19.29,11.36a1.82,1.82,0,0,1,.6.23l10.4,6.8a1.41,1.41,0,0,0,.57.22V7.27a1.41,1.41,0,0,1-.57-.22L19.89.25a1.82,1.82,0,0,0-.6-.23Z" /> <path id="Path_40" data-name="Path 40" class="class-4" d="M30.86,52.64a1.67,1.67,0,0,1-.57-.23l-10.4-6.8a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V56.15a.75.75,0,0,0,.34.63l10.66,7a1.73,1.73,0,0,0,.57.22Z" /> <path id="Path_41" data-name="Path 41" class="class-4" d="M19.89,22.93a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.58,1.58,0,0,0,.57.22V30a1.43,1.43,0,0,1-.57-.23Z" /> </g> </g> </g> </g> </g> </svg> <p class="ml-2 mb-0 logo-text "> Themesberg</p> </div> </a> <div class="d-flex flex-wrap"> <a href="https://demo.themesberg.com/volt/" target="_blank" rel="nofollow noopener" class="btn btn-sm btn-dark animate-up-2 mr-3" style="background: #ffa031; border-color: #ffa031 !important"> Live preview <span class="fad fa-external-link ml-2"></span> </a> <a href="https://themesberg.com/register" role="button" class="btn btn-sm btn-dark animate-up-2 mr-3 d-none d-md-inline" data-toggle="tooltip" data-placement="top" title="Please sign up or login before you can download" data-original-title="Please sign up or login before you can download"><i class="fad fa-download mr-2"></i>Download</a> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard" role="button" class="btn btn-sm btn-primary animate-up-2 mr-3 d-none d-md-inline" style="background: #ffa031; border-color: #ffa031 !important"> <span class="fad fa-rocket-launch mr-2"></span> <span class="btn-inner-text">Upgrade to PRO</span> </a> <a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/quick-start/" target="_blank" role="button" class="btn btn-outline-gray animate-up-2 btn-sm d-none d-md-inline"> <span class="btn-inner-text"><span class="far fa-books mr-2"></span> Docs v1.4.1</span> </a> </div> </div> </nav> <main> <div itemscope itemtype="https://schema.org/Product"> <section class="section section-xl pt-lg-5 pt-3 pb-lg-7 bg-soft o-hidden justify-content-center position-relative"> <div class="container"> <div class="row justify-content-between align-items-center"> <div class="col-12 col-lg-7 mb-5 mb-lg-0"> <nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb-gray breadcrumb-product text-dark breadcrumb-transparent mb-3"> <li class="breadcrumb-item"><a href="https://themesberg.com/themes">Themes</a></li> <li class="breadcrumb-item "><a href="https://themesberg.com/templates/bootstrap">Bootstrap</a> </li> <li class="breadcrumb-item "><a href="https://themesberg.com/templates/bootstrap/admin-dashboard">Admin dashboards</a> </li> <li class="breadcrumb-item active" aria-current="page">Volt</li> </ol> </nav> <h1 class="mb-2 h2" itemprop="name">Volt - Bootstrap 5 Dashboard Template</h1> <p class="mb-4 text-md font-weight-light">Free and open source Bootstrap 5 Admin Template</p><span class="d-none" itemprop="sku">13</span> <div class="d-flex"> <a class="d-flex justify-content-center" href="#reviews" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span class="d-flex justify-content-center mb-2"> <i class="star fa-star fas text-warning mr-2"> </i> <i class="star fa-star fas text-warning mr-2"> </i> <i class="star fa-star fas text-warning mr-2"> </i> <i class="star fa-star fas text-warning mr-2"> </i> <i class="star fa-star fas text-warning "> </i> </span> <span class="text-sm text-gray-700 ml-2"><span class="font-weight-normal"><span itemprop="ratingValue">4.8</span> out of 5</span> (<span itemprop="reviewCount">9</span> Reviews)</span> </a> </div> <div class="mt-4"> <a href="https://demo.themesberg.com/volt/" target="_blank" rel="nofollow noopener" class="btn btn-dark animate-up-2 mr-3" style="background: #ffa031; border-color: #ffa031 !important"> Live preview <span class="fad fa-external-link ml-2"></span> </a> <a href="https://themesberg.com/register" role="button" class="btn btn-dark animate-up-2" data-toggle="tooltip" data-placement="top" title="Please sign up or login before you can download" data-original-title="Please sign up or login before you can download"><i class="fad fa-download mr-2"></i>Download</a> </div> </div> <div class="col-12 col-lg-5 mb-4 mb-lg-0"> <div class="product-card product-card-main show-info card shadow-xl border-0 mb-0" data-product-color="#ffa031"> <div class="card border-0 bg-transparent"> <a href="https://demo.themesberg.com/volt/" rel="noopener nofollow" target="_blank"> <figure> <img src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/volt-bootstrap-5-dashboard-preview.jpg" class="card-img-top rounded-md" alt="Volt - Bootstrap 5 Dashboard Template Preview" itemprop="image"> <figcaption class="show-on-hover"> <span class="btn btn-tertiary px-4" style="background: #ffa031; border-color: #ffa031 !important"> <span class="btn-inner-text">Live preview</span> </span> </figcaption> </figure> </a> </div> </div> </div> </div> </div> </section> <div class="section pt-4 pt-xl-0"> <div class="container mt-n5"> <nav class="mb-lg-6 mb-5"> <div class="nav nav-tabs flex-column flex-md-row shadow-sm border-soft justify-content-around bg-white rounded py-4" id="nav-tab" role="tablist"> <a class="nav-item nav-link" href="#overview"> <span class="fad fa-file-alt mr-2"></span>Overview </a> <a class="nav-item nav-link" href="#pages"> <span class="fad fa-file-image mr-2"></span>Pages </a> <a class="nav-item nav-link" href="#folder-structure"> <span class="fad fa-folder-tree mr-2"></span>Folder Structure </a> <a class="nav-item nav-link" href="#reviews"> <span class="fad fa-comment-lines mr-2"></span>Reviews </a> <a class="nav-item nav-link" href="#changelog"> <span class="fad fa-clipboard-list mr-2"></span>Changelog </a> </div> </nav> <div class="row justify-content-between" id="overview"> <div class="col-12 col-xl-7 product-description mb-4 mb-lg-0 read-more " id="product-description" itemprop="description"> <article> <p>Volt is a free and open source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages and 3 plugins with Vanilla JS.</p> <h2>Bootstrap 5 and Vanilla Javascript</h2> <p>Volt is built using the latest version of Bootstrap 5 and because <a href="https://themesberg.com/blog/tutorial/bootstrap-5-tutorial" target="_blank">jQuery is no longer required as a dependency</a>, Volt has been built using only Vanilla JS.</p> <h2>100+ Components</h2> <p>There are more than 100 free Bootstrap 5 components included some of them being buttons, alerts, modals, datepickers and so on. Check out the <a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/components/alerts/" target="_blank">components on the official documentation</a>.</p> <h2>11 Example Pages</h2> <p>Volt brings 11 example pages including an overview, sign in, sign up, transactions page and many more.</p> <h2>3 Lightweight Plugins</h2> <p>There are 3 lightweight and Vanilla JS plugins that come with Volt, namely a date picker, notification and charts library.</p> <h2>Advanced development flow</h2> <p>By downloading you will get an advanced development workflow package including Sass files and a Gulp commands file that will let you build minified and un-minified project files with the ability to even add certain blocks of code based on your environment.</p> <h2>Well documented</h2> <p>Volt is a thoroughly documented dashboard which covers everything from getting started to having all of the components and plugins well described. Check out our <a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/quick-start/" target="_blank">quick start guide</a>.</p> <h2>Open source project</h2> <p>Volt is a free and open source project under the MIT License so if you appreciate this project you can give the <a href="https://github.com/themesberg/volt-bootstrap-5-dashboard" target="_blank">public Github repository</a> a star and spread the open source love ❤️.</p> <h2>Upgrade to Pro</h2> <p>There is also a pro version of Volt which has more than 800 components, 20 example pages and over 10 advanced plugins that can take your admin dashboard application to the next level. Check out <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard" target="_blank">Volt Pro Premium Bootstrap 5 Admin Dashboard</a>.</p> </article> <span class="toggle-read-more" data-target="#product-description">Read more <i class="fad fa-chevron-circle-down ml-1"></i></span> </div> <div class="col-12 col-xl-4 mt-3 mt-lg-0"> <ul class="d-flex justify-content-center list-style-none mb-4"> <li><button class="btn btn-xl mb-2 mr-3 btn-icon-only rounded-circle btn-white" data-toggle="tooltip" title="Built with Bootstrap 5 - World's most popular CSS Framework"> <span class="btn-inner-icon"><svg xmlns="http://www.w3.org/2000/svg" height="32" class="d-block" viewBox="0 0 118 94" role="img"><title>Bootstrap 5</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="#7F16F9"></path></svg></span> </button></li> <li> <button class="btn btn-xl mb-2 mr-3 btn-icon-only rounded-circle btn-white" data-toggle="tooltip" title="W3C validated and fully responsive HTML5"> <span class="btn-inner-icon"><i class="fab fa-html5 text-xxl text-html"></i></span> </button> </li> <li><button class="btn btn-xl mb-2 mr-3 btn-icon-only rounded-circle btn-white" data-toggle="tooltip" title="SASS files for experienced Front End Developers"> <span class="btn-inner-icon"><i class="fab fa-sass text-xxl text-sass"></i></span> </button></li> <li><button class="btn btn-xl mb-2 mr-3 btn-icon-only rounded-circle btn-white" data-toggle="tooltip" title="Gulp commands - enhanced development workflow"> <span class="btn-inner-icon"><i class="fab fa-gulp text-xxl text-gulp"></i></span> </button></li> </li> </ul> <div class="card bg-soft border-soft p-5 mb-3"> <div class="text-center mb-3 mb-lg-0"> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard" role="button" class="btn btn-block btn-primary animate-up-2 mb-3" style="background: #ffa031; border-color: #ffa031 !important"> <span class="fad fa-rocket-launch mr-2"></span> <span class="btn-inner-text">Upgrade to PRO</span> </a> <a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/quick-start/" target="_blank" role="button" class="btn btn-outline-gray animate-up-2 btn-block"> <span class="btn-inner-text"><span class="far fa-books mr-2"></span> Docs v1.4.1</span> </a> </div> </div> <div class="card bg-soft border-soft p-5 mb-5"> <div class="d-block justify-content-between align-items-center mb-0"> <div class="pb-3 mb-3 font-weight-normal"> <div class="d-flex align-items-center justify-content-center"> <i class="fas fa-cloud-download-alt downloads-icon mr-2"></i> <span class="h5 m-0">16248 downloads</span> </div> </div> <div class="pb-3 mb-3 border-bottom" itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <meta itemprop="priceCurrency" content="USD" /> <meta itemprop="availability" content="instock"> <meta itemprop="url" content="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard"> <span class="text-gray font-weight-normal"><i class="fad fa-tags mr-2"></i> Price: </span> <span class="font-weight-normal"><span class="currency">$</span><span itemprop="price" class="standard_price">0</span> </div> <div class="pb-3 mb-3 border-bottom"> <span class="text-gray font-weight-normal"><i class="fad fa-bullhorn mr-2"></i> Released: </span> <span class="font-weight-normal">4 years ago</span> </div> <div class="pb-3 mb-3 border-bottom"> <span class="text-gray font-weight-normal"><i class="fad fa-sync-alt mr-2"></i> Updated: </span> <span class="font-weight-normal">3 years ago</span> </div> <div class="pb-3 mb-3 border-bottom"> <span class="text-gray font-weight-normal"><i class="fad fa-code-branch mr-2"></i> Version: </span> <span class="font-weight-normal">1.4.1</span> </div> <div class="pb-3 mb-3 border-bottom"> <span class="text-gray font-weight-normal"><i class="fad fa-list mr-2"></i> Category: </span> <a href="https://themesberg.com/templates/bootstrap/admin-dashboard" class="text-gray font-weight-normal">Admin dashboards</a> </div> <div class="pb-3 mb-3 border-bottom"> <span class="text-gray font-weight-normal"><i class="fad fa-file-contract mr-2"></i> Well Documented </span> </div> <ul class="list-style-none mb-0 mt-5"> <li class="font-small mb-2"><i class="fad fa-check-circle mr-1 text-success"></i> 6 months premium support included</li> <li class="font-small mb-2"><i class="fad fa-check-circle mr-1 text-success"></i> 100% W3C valid HTML5 files</li> <li class="font-small mb-2"><i class="fad fa-check-circle mr-1 text-success"></i> Future updates</li> <li class="font-small mb-2"><i class="fad fa-check-circle mr-1 text-success"></i> Fully responsive pages</li> <li class="font-small mb-2"><i class="fad fa-check-circle mr-1 text-success"></i> 30 day <a href="https://themesberg.com/refund-policy" class="font-weight-light">refund policy</a> </li> <li class="font-small mb-2"><i class="fad fa-check-circle mr-1 text-success"></i> Built by <span itemprop="brand">Themesberg</span></li> </ul> </div> </div> </div> </div> <section class="section-sm" id="pages"> <h2 class="mb-3">10 Hand-crafted Example Pages</h2> <p>After downloading <strong>Volt - Bootstrap 5 Dashboard Template</strong> you will get 10 high-quality example pages to save you time writing boilerplate code and set up the user interface of your website or web application in no time.</p> <p>Hover over any page below and if you click on one of them you will be able to live preview one of the example pages in your browser.</p> <div class="row mt-5"> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/volt/pages/dashboard/dashboard.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/pages/overview.jpg" alt="Dashboard preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Dashboard<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/volt/pages/transactions.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/pages/transactions.jpg" alt="Transactions preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Transactions<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/volt/pages/settings.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/pages/settings.jpg" alt="Settings preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Settings<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/volt/pages/examples/sign-in.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/pages/sign-in.jpg" alt="Sign in preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Sign in<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/volt/pages/examples/sign-up.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/pages/sign-up.jpg" alt="Sign up preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Sign up<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/volt/pages/examples/forgot-password.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/pages/forgot-password.jpg" alt="Forgot password preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Forgot password<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/volt/pages/examples/reset-password.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/pages/reset-password.jpg" alt="Reset password preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Reset password<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/volt/pages/examples/lock.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/pages/lock.jpg" alt="Profile lock preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Profile lock<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/volt/pages/examples/404.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/pages/404.jpg" alt="404 Not Found preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">404 Not Found<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/volt/pages/examples/500.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-bootstrap-5-dashboard/pages/500.jpg" alt="500 Server Error preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">500 Server Error<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> </div> </section> <hr class="bg-soft my-0"> <section class="section-sm mt-5 mt-lg-0 mb-5 mb-lg-0" id="folder-structure"> <h2 class="mb-3">Folder structure</h2> <p>We believe that being transparent when it comes to the code base and the file structure can make you better understand how it is going to be like to actually work with Volt. </p> <p>Below you can check out the folder structure of this template, and by hovering over each item you can also read an explanation of what the folder contains and what its role is.</p> <div class="mt-5"> <div class="row d-flex align-items-center"> <div class="col-12 col-lg-6 mb-4"> <div class="d-none d-lg-block mt-5"> <h4 class="h5">You need only HTML, CSS and Javascript?</h4> <p class="mb-4">Don't worry, we got you covered. We have a folder called <code class="text-danger">html&css</code> which includes only the basic HTML5, CSS3 and Javascript technologies.</p></div> </div> <div class="col-12 col-lg-6 order-lg-first d-flex justify-content-center"> <ul class="d-block fmw-100 list-style-none folder-structure"> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="Main folder that you will be working with"><span class="fas fa-folder mr-2"></span>src</li> <li> <ul class="list-style-none pl-4"> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="CSS, Images, Fonts and Javascript"><span class="fas fa-folder mr-2"></span> assets</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="HTML templates"><span class="fas fa-folder mr-2"></span> html</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="Partials are HTML snippets that are included in multiple pages, such as the menu or footer"><span class="fas fa-folder mr-2"></span> partials</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="Sass source files"><span class="fas fa-folder mr-2"></span> scss</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="The page you're looking at right now. Call it inception."><span class="fab fa-html5 mr-2 text-secondary"></span> index.html</li> </ul> </li> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="Pixel with only HTML, CSS and Javascript"><span class="fas fa-folder mr-2 text-muted"></span> html&css</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="Temporary folder that is created when serving files with BrowserSync"><span class="fas fa-folder text-muted mr-2"></span>.temp</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="Minified version of the project"><span class="fas fa-folder mr-2 text-muted"></span> dist</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="Project dependencies from package.json"><span class="fas fa-folder text-muted mr-2"></span> node_modules</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="Development workflow commands. We have them well documented."><span class="fab fa-js-square mr-2 text-warning"></span> gulpfile.js</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="Project details and dependencies."><span class="fas fa-file-code mr-2 text-tertiary"></span> package.json</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="No project can miss a README :)"><span class="fas fa-file-code mr-2 text-tertiary"></span> README.md</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="This file ensures that generated files and folder are ignored by Git. (eg. node_modules)"><span class="fas fa-file-code mr-2 text-tertiary"></span> .gitignore</li> </ul> </div> </div> </div> </section> <hr class="bg-soft my-0"> <section class="section-sm mt-5 mt-lg-0 mb-5 mb-lg-0" id="reviews"> <div class="row"> <div class="col-12 col-lg-4 mb-5 mb-lg-0"> <h2 class="mb-2">Customer reviews</h2> <div class="d-flex"> <span class="mb-2 mr-2"> <i class="star fa-star fas text-warning mr-1"> </i> <i class="star fa-star fas text-warning mr-1"> </i> <i class="star fa-star fas text-warning mr-1"> </i> <i class="star fa-star fas text-warning mr-1"> </i> <i class="star fa-star fas text-warning "> </i> </span> <span class="d-block text-center mb-1 font-weight-normal"><span>4.8</span> out of 5</span> </div> <span class="d-block text-sm text-gray-700">9 Reviews for Volt</span> </div> <div class="col-12 col-lg-8"> <div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">Łukasz Gręźlikowski</span> </span> <meta itemprop="datePublished" content="2021-06-10 08:43:58"> <span class="ml-2 text-sm d-none d-md-inline">3 years ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">5</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">Good starting point for every application with great look and multiple ready to use views and components.</p> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">André Breitenbach</span> </span> <meta itemprop="datePublished" content="2021-07-26 14:33:45"> <span class="ml-2 text-sm d-none d-md-inline">3 years ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star far text-gray "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">4</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">I think it's a nice and simple template but I miss the possibility to minimize the sidebar at 1080p.</p> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">Ankush Yadav</span> </span> <meta itemprop="datePublished" content="2021-08-05 13:11:34"> <span class="ml-2 text-sm d-none d-md-inline">3 years ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">5</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">Awesome.</p> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">Patryk Vizauer</span> </span> <meta itemprop="datePublished" content="2021-10-10 20:10:49"> <span class="ml-2 text-sm d-none d-md-inline">3 years ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">5</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">Very nice. Looks good</p> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">Speed Junior</span> </span> <meta itemprop="datePublished" content="2022-01-10 00:06:36"> <span class="ml-2 text-sm d-none d-md-inline">2 years ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">5</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">I’m using Volt Theme in my project. It’s very simple to use. I migrated easily to Volt Theme. Thanks for the contribution from Themesberg</p> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">hassuu</span> </span> <meta itemprop="datePublished" content="2022-07-11 16:58:31"> <span class="ml-2 text-sm d-none d-md-inline">2 years ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">5</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">AWWWWESOME THEME. REALLY liked the design</p> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">Wojciech</span> </span> <meta itemprop="datePublished" content="2023-01-23 05:21:56"> <span class="ml-2 text-sm d-none d-md-inline">1 year ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">5</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">I'm using Volt in my project - it's awesome! I love it!</p> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">Tms Ucic</span> </span> <meta itemprop="datePublished" content="2023-01-29 16:47:22"> <span class="ml-2 text-sm d-none d-md-inline">1 year ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star far text-gray "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">4</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">It's nice templates, I use it for my current project. Thank you for your works! I hope this template getting better and more helpful for another developer. Big thanks for you!</p> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">Andrade Albuquerque</span> </span> <meta itemprop="datePublished" content="2023-04-27 08:35:49"> <span class="ml-2 text-sm d-none d-md-inline">1 year ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">5</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">This one suprised me. It's clean, simple, with an amazing design. Thank you!</p> </div> <a href="https://themesberg.com/login" rel="nofollow" data-toggle="tooltip" title="Please sign in or download the item to write a review" class="btn btn-primary"><i class="fad fa-comment-alt-edit mr-2"></i> Write a review</a> </div> </div> </div> </section> <hr class="bg-soft my-0"> <section class="section-sm mt-5 mt-lg-0 mb-5 mb-lg-0" id="changelog"> <h2 class="mb-3">Changelog</h2> <p>We believe that providing meaningful updates to our templates are important to keep up with the evolution of the dependencies, libraries, and the new design requirements that the modern day web industry requires.</p> <p>Below you can see the timeline of changes for Volt since its initial launch 4 years ago.</p> <div class="row mt-5 justify-content-between"> <div class="col-12 col-lg-8"> <h3 class="h4 mb-4">Releases</h3> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_0" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v1.4.1 <span class="mx-2">-</span> <span class="changelog-date">June 6, 2021</span> <span class="badge badge-success ml-3">Latest release</span> </a> <div class="collapse" id="changelog_0"> <ul class="changelog-list text-monospace"> <li>Fix dropdown hover color</li> <li>Improve dashboard widget styling</li> <li>Minor bug fixes</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_1" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v1.4.0 <span class="mx-2">-</span> <span class="changelog-date">May 28, 2021</span> </a> <div class="collapse" id="changelog_1"> <ul class="changelog-list text-monospace"> <li>Update to stable Bootstrap 5.0.1</li> <li>Massively improve styling across elements, sections, and pages</li> <li>Use SVG powered icons instead of font icons</li> <li>Update the color palette</li> <li>Minor bug fixes</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_2" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v1.3.1 <span class="mx-2">-</span> <span class="changelog-date">February 02, 2021</span> </a> <div class="collapse" id="changelog_2"> <ul class="changelog-list text-monospace"> <li>Use !default flag for variables file for easier overriding</li> <li>Removed redundant local vendor styles</li> <li>Created new custom folder in Sass to override theme variables, functions, and styles</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_3" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v1.3.0 <span class="mx-2">-</span> <span class="changelog-date">January 31, 2021</span> </a> <div class="collapse" id="changelog_3"> <ul class="changelog-list text-monospace"> <li>Updated to Bootstrap Beta 1</li> <li>Enhanced overall styling</li> <li>Fixed form elements with icon focus</li> <li>Reduced final CSS file size</li> <li>Improved overall speed</li> <li>Improved dropdown items</li> <li>Updated presentation page</li> <li>Added theme settings toggle</li> <li>Improved the sidebar</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_4" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v1.2.0 <span class="mx-2">-</span> <span class="changelog-date">November 1, 2020</span> </a> <div class="collapse" id="changelog_4"> <ul class="changelog-list text-monospace"> <li>Updated to Bootstrap 5 Alpha 2</li> <li>Fixed notification messages layout for tablet devices</li> <li>Improved main container structure</li> <li>Fixed footer breaking when updating to Bootstrap Alpha 2</li> <li>Fix spacing and scrolling issue for the sign in, sign up pages</li> <li>Update the social register/login buttons to be an anchor tag instead of button</li> <li>Added a “back to homepage” link for the sign in and sign up pages</li> <li>Update modals close button based on the Bootstrap 5 Alpha 2 update</li> <li>Fix responsive issues regarding the modals</li> <li>Added link to all components in the sidebar</li> <li>Disable scroll for the main content part when the mobile navigation is open</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_5" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v1.0.0 <span class="mx-2">-</span> <span class="changelog-date">August 23, 2020</span> </a> <div class="collapse" id="changelog_5"> <ul class="changelog-list text-monospace"> <li>Initial release files</li> </ul> </div> </div> </div> </div> </section> <hr class="bg-soft my-0"> <hr class="bg-soft my-0"> <aside class="section section-sm"> <h3 class="font-weight-medium mb-2">Related themes</h3> <p>Other users were also interested in the following premium templates:</p> <div class="row mt-5"> <div class="col-12 col-md-6 col-lg-4 mb-5"> <div class="product-card show-info card shadow-sm border-soft" data-product-color="#803C68"> <div class="card border-0 bg-transparent"> <figure class="m-0"> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit"> <img data-src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pixel-pro-thumb.jpg" class="lazy" alt="Pixel Pro - Premium Bootstrap 5 UI KIT Preview"> </a> <figcaption class="show-on-hover"> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" class="btn btn-icon-only rounded-circle btn-product-action mr-3" data-toggle="tooltip" data-placement="bottom" title="Theme details"> <span class="btn-inner-icon"><i class="fad fa-list"></i></span> </a> <a href="https://demo.themesberg.com/pixel-pro/v5/" target="_blank" class="btn btn-icon-only rounded-circle btn-product-action" data-toggle="tooltip" data-placement="bottom" title="Live preview"> <span class="btn-inner-icon"><i class="fad fa-laptop"></i></span> </a> </figcaption> </figure> <div class="card-body p-3"> <div class="post-meta pt-2 d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" class="mb-2 d-block mt-0 h5 text-dark">Pixel Pro UI Kit</a> <p class="font-weight-light text-gray small m-0">Premium Bootstrap 5 UI Kit with user dashboard</p> </div> </div> <hr class="bg-soft"> <div class="d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" class="product-price text-dark">$89</a> </div> <div class="product-counters d-flex"> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" class="product-card-downloads font-small text-gray-700"> <i class="fad fa-cart-arrow-down mr-1"></i> 417 </a> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit#reviews" class="product-card-downloads font-small text-gray-700 ml-3"> <i class="far fa-star mr-1"></i> 5.0/5 </a> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4 mb-5"> <div class="product-card show-info card shadow-sm border-soft" data-product-color="#ffa031"> <div class="card border-0 bg-transparent"> <figure class="m-0"> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard"> <img data-src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-bootstrap-5-dashboard/volt-pro-preview.jpg" class="lazy" alt="Volt Pro - Premium Bootstrap 5 Dashboard Preview"> </a> <figcaption class="show-on-hover"> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard" class="btn btn-icon-only rounded-circle btn-product-action mr-3" data-toggle="tooltip" data-placement="bottom" title="Theme details"> <span class="btn-inner-icon"><i class="fad fa-list"></i></span> </a> <a href="https://demo.themesberg.com/volt-pro/" target="_blank" class="btn btn-icon-only rounded-circle btn-product-action" data-toggle="tooltip" data-placement="bottom" title="Live preview"> <span class="btn-inner-icon"><i class="fad fa-laptop"></i></span> </a> </figcaption> </figure> <div class="card-body p-3"> <div class="post-meta pt-2 d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard" class="mb-2 d-block mt-0 h5 text-dark">Volt Pro Bootstrap 5 Dashboard</a> <p class="font-weight-light text-gray small m-0">Premium Bootstrap 5 Admin Template</p> </div> </div> <hr class="bg-soft"> <div class="d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard" class="product-price text-dark">$69</a> </div> <div class="product-counters d-flex"> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard" class="product-card-downloads font-small text-gray-700"> <i class="fad fa-cart-arrow-down mr-1"></i> 305 </a> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard#reviews" class="product-card-downloads font-small text-gray-700 ml-3"> <i class="far fa-star mr-1"></i> 4.5/5 </a> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4 mb-5"> <div class="product-card show-info card shadow-sm border-soft" data-product-color="#2D4DC8"> <div class="card border-0 bg-transparent"> <figure class="m-0"> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap-pro"> <img data-src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/neumorphism-ui-pro/neumorphism-ui-pro-thumb.jpg" class="lazy" alt="Neumorphism UI PRO Bootstrap Preview"> </a> <figcaption class="show-on-hover"> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap-pro" class="btn btn-icon-only rounded-circle btn-product-action mr-3" data-toggle="tooltip" data-placement="bottom" title="Theme details"> <span class="btn-inner-icon"><i class="fad fa-list"></i></span> </a> <a href="https://demo.themesberg.com/neumorphism-ui-pro/" target="_blank" class="btn btn-icon-only rounded-circle btn-product-action" data-toggle="tooltip" data-placement="bottom" title="Live preview"> <span class="btn-inner-icon"><i class="fad fa-laptop"></i></span> </a> </figcaption> </figure> <div class="card-body p-3"> <div class="post-meta pt-2 d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap-pro" class="mb-2 d-block mt-0 h5 text-dark">Neumorphism UI PRO</a> <p class="font-weight-light text-gray small m-0">Neumorphism inspired user interface kit</p> </div> </div> <hr class="bg-soft"> <div class="d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap-pro" class="product-price text-dark">$69</a> </div> <div class="product-counters d-flex"> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap-pro" class="product-card-downloads font-small text-gray-700"> <i class="fad fa-cart-arrow-down mr-1"></i> 203 </a> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap-pro#reviews" class="product-card-downloads font-small text-gray-700 ml-3"> <i class="far fa-star mr-1"></i> 5.0/5 </a> </div> </div> </div> </div> </div> </div> </div> <div class="text-center"> <a href="https://themesberg.com/themes" class="btn btn-primary"><i class="fad fa-th-list mr-2"></i> View all Themes</a> </div> </aside> </div> </div> </div> </main> <section class="footer section section-md mb-5 pt-0 pb-0"> <div class="container"> <div class="row position-relative no-gutters z-2 shadow-sm rounded bg-white"> <div class="col-12 col-lg-6 bg-white rounded"> <div class="border-left-md border-soft py-4 px-3 px-lg-5 m-0 bg-white rounded"> <p class="mb-2 h4">Join our community</p> <p class="font-medium mb-3">Get access to free templates and themes used by over 89493 web developers.</p> <a class="btn btn-sm btn-outline-primary d-none d-sm-inline-block mb-4" href="https://themesberg.com/register"> Create an account for free <span class="fas fa-long-arrow-alt-right ml-2"></span> </a> <p class="text-md">Follow us on social media:</p> <ul class="d-flex flew-row list-style-none"> <li class="mr-3"> <a href="https://twitter.com/themesberg" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-twitter" data-toggle="tooltip" data-placement="bottom" title="Follow @themesberg"> <span class="btn-inner-icon"><i class="fab fa-twitter"></i></span> </a> </li> <li class="mr-3"> <a href="https://www.facebook.com/themesberg/" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-facebook" data-toggle="tooltip" data-placement="bottom" title="Like Themesberg"> <span class="btn-inner-icon"><i class="fab fa-facebook"></i></span> </a> </li> <li class="mr-3"> <a href="https://github.com/themesberg" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-github" data-toggle="tooltip" data-placement="bottom" title="Open source projects"> <span class="btn-inner-icon"><i class="fab fa-github"></i></span> </a> </li> <li class="mr-3"> <a href="https://www.instagram.com/themesberg/" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-instagram" data-toggle="tooltip" data-placement="bottom" title="Follow us on Instagram"> <span class="btn-inner-icon"><i class="fab fa-instagram"></i></span> </a> </li> <li class="mr-3"> <a href="https://dribbble.com/themesberg" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-dribbble" data-toggle="tooltip" data-placement="bottom" title="Follow us on Dribbble"> <span class="btn-inner-icon"><i class="fab fa-dribbble"></i></span> </a> </li> <li class="mr-3"> <a href="https://www.linkedin.com/company/themesberg/" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-linkedin" data-toggle="tooltip" data-placement="bottom" title="Follow us on LinkedIn"> <span class="btn-inner-icon"><i class="fab fa-linkedin"></i></span> </a> </li> </ul> </div> </div> <div class="col-12 col-lg-6 bg-white rounded"> <div class="border-left-md border-soft py-4 px-3 px-lg-5 m-0 bg-white rounded"> <p class="mb-2 h4">Subscribe to our newsletter</p> <p class="mb-4 text-md">New themes, blog posts, marketplace journey. No spam.</p> <script async data-uid="4e9649fabb" src="https://fabulous-artisan-1281.ck.page/4e9649fabb/index.js"></script> </div> </div> </div> </div> </section> <footer class="pb-6 pt-9 bg-soft mt-n8"> <div class="container"> <div class="row mb-5 justify-content-center"> <div class="col-auto"> <a class="footer-brand" href="https://themesberg.com"> <img class="navbar-brand-light" height="35" src="https://themesberg.com/img/brand/themesberg-footer.svg" alt="Logo Themesberg"> </a> </div> </div> <ul class="text-md-center mb-4 text-center footer-links pl-0"> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://flowbite.com/" target="_blank">Flowbite - Tailwind Components</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/terms-and-conditions">Terms and Conditions</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/privacy-policy">Privacy Policy</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/cookie-policy">Cookie Policy</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/licensing">Licensing</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/knowledge-center">Knowledge Center</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/custom-development">Custom Development</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/contact">Contact</a></li> </ul> <div class="row justify-content-center text-center"> <div class="col-12"> <small class="text-gray-700">© 2019-2024 All Rights Reserved. Themesberg™ is a registered trademark of Crafty Dwarf LLC.</small> </div> </div> </div> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.0/smooth-scroll.min.js"></script> <script src="https://themesberg.com/js/themesberg.js"></script> <script src="https://cdn.paddle.com/paddle/paddle.js"></script> <script src="https://themesberg.com/js/checkout.js"></script> </body> </html>