v5.0Bootstrap 5 responsive admin template
documented by Sean Ngu
Updated on: 13/July/2025
By: Sean Ngu
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to send your question via ThemeForest. Thanks so much!
Follow the following step to install the laravel in your localhost
You may refer to their official documentation for how to setup the development environment.
Setup Guide
<!-- run the following command --> cd /your-path-url/template_laravel composer install npm install npm run plugins <!-- 1st terminal / command prompt to run --> npm run dev // vite listen to the scss files changes npm run build // build the scss files into css file <!-- 2nd terminal / command prompt to run --> php artisan serve <!-- browse the url --> http://127.0.0.1:8000/
Make sure PHP >= 8.0.0 & node.js has been installed on your localhost / server
File structure overview for Laravel Version
hud_laravel_v5.0/
├──template_laravel_startup/ // version without demo pages
└──template_laravel/ // version include all demo pages
├── artisan
├── composer.json
├── package.json
├── phpunit.xml
├── server.php
├── vite.config.js
├── plugins.js
├── app/
├── bootstrap/
├── config/
├── database/
├── public/
├── resources/
│ ├── lang
│ ├── js
│ ├── scss
│ └── views
│ ├── errors
│ ├── layout
│ ├── pages
│ └── partial
├── routes/
├── storage/
└── tests/
We split the header, sidebar, footer and etc into few other part and include it in the base file. Base file has been located in /resources/views/layouts/default.blade.php.
<!DOCTYPE html>
<html data-bs-theme="dark" lang="{{ app()->getLocale() }}"{{ (!empty($htmlAttribute)) ? $htmlAttribute : '' }}>
<head>
@include('partial.head')
</head>
<body class="{{ (!empty($bodyClass)) ? $bodyClass : '' }}">
<!-- BEGIN #app -->
<div id="app" class="app {{ (!empty($appClass)) ? $appClass : '' }}">
@includeWhen(empty($appHeaderHide), 'partial.header')
@includeWhen(empty($appSidebarHide), 'partial.sidebar')
@includeWhen(empty($appTopNav), 'partial.top-nav')
@if (empty($appContentHide))
<!-- BEGIN #content -->
<div id="content" class="app-content {{ (!empty($appContentClass)) ? $appContentClass : '' }}">
@yield('content')
</div>
<!-- END #content -->
@else
@yield('content')
@endif
@includeWhen(!empty($appFooter), 'partial.footer')
</div>
<!-- END #app -->
@include('partial.scroll-top-btn')
@include('partial.theme-panel')
@include('partial.scripts')
</body>
</html>
Below is the list of supported variable / setting in view file.
| Variable | Usage |
|---|---|
@extends('layout.default', ['htmlAttribute' => '']) |
Set the attribute for html tag |
@extends('layout.default', ['bodyClass' => '']) |
Set the css class for body tag |
@extends('layout.default', ['appClass' => '']) |
Set the app class for div#app tag |
@extends('layout.default', ['appContentClass' => '']) |
Set the app content class for div#app-content tag |
@extends('layout.default', ['appHeaderHide' => true]) |
Flag to exclude header from your page |
@extends('layout.default', ['appSidebarHide' => true]) |
Flag to exclude sidebar from your page |
@extends('layout.default', ['appContentHide' => true]) |
Flag to place your page content outside #app-content container |
@extends('layout.default', ['appFooter' => true]) |
Flag to include footer in your page |
@extends('layout.default', ['appTopNav' => true]) |
Flag to include top nav in your page |
Using laravel stacks to add css / js by page level.
// example for how to add page level css
@push('css')
<link href="/assets/plugins/photoswipe/dist/photoswipe.css" rel="stylesheet">
...
@endpush
// example for how to add page level js
@push('js')
<script src="/assets/plugins/photoswipe/dist/photoswipe-ui-default.min.js"></script>
...
@endpush
The default sidebar menu generator will set the .menu-item as active stat if the current url match with the pre-defined url for sidebar menu. Below is an example for
custom active stat for those dynamic url like /product/edit/124.
// set the menu as active stat from .blade file without matching the url @php config(['sidebar.activeUrl' => '/pos/kitchen-order']); @endphp
In this version of Studio Laravel, all third-party CSS plugins are directly included via <link> tags in /resources/views/partial/head.blade.php for easier control and modularity.
You may change the color scheme from /resources/scss/_variables.scss.
Studio styles are compiled with Vite, with the main entry point defined at:
resources/scss/styles.scss.
In this version of Studio Laravel, JavaScript libraries are loaded individually via <script> tags inside
/resources/views/partial/scripts.blade.php, giving you more control over plugin management.
Custom JavaScript is compiled with Vite, using the entry point:
resources/js/app.js
Sidebar collapsed:
@extends('layout.default', [
'appClass' => 'app-sidebar-collapsed'
])
Full height:
@extends('layout.default', [
'appClass' => 'app-content-full-height'
])
Full width:
@extends('layout.default', [
'appClass' => 'app-content-full-width'
])
Fixed footer:
@extends('layout.default', [
'appFooter' => 'true'
])
Boxed Layout
@extends('layout.default', [
'appClass' => 'app-boxed-layout'
])
Top Nav
@extends('layout.default', [
'appSidebarHide' => 'true',
'appTopNav' => 'true',
'appClass' => 'app-without-sidebar'
])
Without Sidebar
@extends('layout.default', [
'appClass' => 'app-without-sidebar',
'appSidebarHide' => 'true'
])
Without Header
@extends('layout.default', [
'appClass' => 'app-without-header',
'appHeaderHide' => 'true'
])
Add the theme class to the <body> tag in order to change the theme color.
<body class="theme-red">...</body> <body class="theme-pink">...</body> <body class="theme-orange">...</body> <body class="theme-yellow">...</body> <body class="theme-lime">...</body> <body class="theme-green">...</body> <body class="theme-teal">...</body> <body class="theme-cyan">...</body> <body class="theme-blue">...</body> <body class="theme-purple">...</body> <body class="theme-indigo">...</body> <body class="theme-black">...</body> <body class="theme-gray-100">...</body> <body class="theme-gray-200">...</body> <body class="theme-gray-300">...</body> <body class="theme-gray-400">...</body> <body class="theme-gray-500">...</body> <body class="theme-gray-600">...</body> <body class="theme-gray-700">...</body> <body class="theme-gray-800">...</body> <body class="theme-gray-900">...</body>
Add the 'cover' class to the <html> tag to change the page cover. You can modify the cover image from either /scss/images/ or /dist/assets/css/images. Note that both light and dark mode have separate background cover images.
<html class="bg-cover-2"> <html class="bg-cover-3"> <html class="bg-cover-4"> <html class="bg-cover-5"> <html class="bg-cover-6"> <html class="bg-cover-7"> <html class="bg-cover-8"> <html class="bg-cover-9">
Starting from version 2.0, we have implemented a default dark mode theme that is applied to the HTML page.
This is achieved through the use of the data-bs-theme="dark" attribute in the <html> tag.
If you wish to enable the light mode instead, you can easily do so by removing the data-bs-theme="dark" attribute from the HTML tag.
This will disable the default dark mode and enable the light mode theme.
Please note that once you remove the data-bs-theme="dark" attribute,
the light mode theme will persist even if the user refreshes the page or navigates to a different page within the application.
<!DOCTYPE html> <html lang="en" data-bs-theme="dark"> </html>to
<!DOCTYPE html> <html lang="en"> </html>
With this example, the data-bs-theme="dark" attribute has been removed from html tag. This will enable the light mode to the entire page.
OR
If you want to apply light / dark mode to a single component only, you can add the data-bs-theme="light|dark" attribute to that component.
<div class="card" data-bs-theme="light">
<div class="card-body">
<!-- your component content here -->
</div>
</div>
Add the dir="rtl" attribute to <html> for /resources/views/layouts/default.blade.php in order to enable Right-To-Left (RTL) layout direction.
<html lang="{{ app()->getLocale() }}" dir="rtl">
This will flip the layout direction of the entire page to support RTL languages like Arabic, Hebrew, or Persian.
Global Variables
The /resources/scss/_variables.scss file contains the variables that control the styles of your application.
To edit these variables, navigate to the /resources/scss/_variables.scss file in your code editor and modify the values of the variables to suit your needs.
<!-- global variable --> /resources/scss/_variables.scss
Dark Mode Variables
The /resources/scss/_variables-dark.scss file contains the variables that control the styles for dark mode.
These variables are used in conjunction with the variables in the /resources/scss/_variables.scss file to provide different values for light and dark modes.
<!-- dark mode variable --> /resources/scss/_variables-dark.scss
I've used the following images, icons or other files as listed.
jQuery Plugins
Photos