NobleUI - HTML Bootstrap 5 Admin Dashboard Template v 3.0.1

Thank you for purchasing NobleUI Responsive Bootstrap 5 Admin Template. If you have any questions that are beyond the scope of this documentation, feel free to contact us through our Support Page or email us directly at nobleui.team@gmail.com.

Introduction

This theme is built on Bootstrap - The most popular front-end component library. This theme extended bootstrap components and add custom components.

What's include

NobleUI comes with a simple and logically organized file structure for easy to understand and maintainability.

Setup environment for customization (if you are using Gulp & SCSS)

First you must have Node.js installed in your computer.

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

We are using Gulp which allows having complete automation to build flow. In case if you don't know - Gulp is a gulp is a toolkit for automating painful or time-consuming tasks in development workflow, so you can stop messing around and build something. You can read it more about it here.

Install Gulp:

If you have previously installed a version of gulp globally, please run npm rm --global gulp to make sure your old version doesn't collide with gulp-cli.

Verify that Gulp is successfully installed, and version of installed Gulp will appear.

After you finished with above two steps, you can run the automated tasks (as described below) to build the application.

Command Description
gulp serve:demo1 Demo1 serve and open in browser. it will watch for file changes and compile scss files. The browser will automatically reload when the changes are made.
gulp serve:demo2 Demo2 serve and open in browser. it will watch for file changes and compile scss files. The browser will automatically reload when the changes are made.
gulp serve:demo1-rtl Demo1-RTL serve and open in browser. it will watch for file changes and compile scss files. The browser will automatically reload when the changes are made.
gulp serve:demo2-rtl Demo1-RTL serve and open in browser. it will watch for file changes and compile scss files. The browser will automatically reload when the changes are made.
gulp inject Inject partial files such as '_navbar.html', '_sidebar.html etc' from the partials folder to the pages.
gulp copyVendors Copy necessary vendor files such as .css, .js and other vendor files from the node_modules folder to the vendors directory.

Customization (using Gulp & SCSS)

You can customize various elements including navbar, sidebar, form elements, etc by simply editing scss files in 'scss' directory or removing unnecessary components from demo*/style.scss main file.

Make sure that the gulp serve:{demo*} gulp task is running in the terminal to compile scss files when you make changes. Once the changes are made, the scss file will be compiled and the changes will be reflected in the browser after an automatic browser reload.

It is important to run gulp serve:{demo*} command from the directory where the gulpfile.js is located.


Note: If you prefer not to use Gulp and SCSS, you can still start using the project right away. Simply place the files in your desired environment and open the HTML file in a browser—no additional setup or compilation required.

Dark Sidebar/Header

The Dark sidebar (in Demo1) & Dark header (in Demo2) are does not enabled by default.

Add class to the body element as given below.

  • For the dark sidebar (in Demo1), set class="sidebar-dark" on the body element.
  • For the dark header (in Demo2), set class="navbar-dark" on the body element.

Credits

Plugin Link
Ace Editor https://ace.c9.io/
Animate.css https://daneden.github.io/animate.css/
Apex Charts https://apexcharts.com/
Bootstrap http://getbootstrap.com/
Pickr https://simonwep.github.io/pickr/
Bootstrap Max-length http://mimo84.github.io/bootstrap-maxlength/
Chart.js https://www.chartjs.org/
Codemirror https://codemirror.net/
Cropper.js https://github.com/fengyuanchen/cropperjs
Data Table https://datatables.net/
Dropify https://github.com/JeremyFagis/dropify/
Dropzone https://www.dropzonejs.com/
Feather Icons https://feathericons.com/
Flag Icons https://flagicons.lipis.dev/
Flatpickr https://flatpickr.js.org/
Flot Charts http://www.flotcharts.org/
Full Calendar https://fullcalendar.io/
Input Mask https://robinherbots.github.io/Inputmask/
jQuery https://jquery.com/
jQuery Sparklines https://omnipotent.net/jquery.sparkline/#s-about
jQuery Steps http://www.jquery-steps.com/GettingStarted
jQuery Tags Input Plugin https://www.npmjs.com/package/jquery-tags-input
jQuery Validation https://jqueryvalidation.org/
MDI Icons https://materialdesignicons.com/
Moment js https://momentjs.com/
Owl Carousel 2 https://owlcarousel2.github.io/OwlCarousel2/
Peity chart https://benpickles.github.io/peity/
Perfect scrollbar https://github.com/mdbootstrap/perfect-scrollbar
Popper Js https://popper.js.org/
Select 2 https://select2.org/
EasyMDE https://github.com/Ionaru/easy-markdown-editor
Sweetalert 2 https://sweetalert2.github.io/
TinyMCE https://www.tiny.cloud/
Typeahead http://twitter.github.io/typeahead.js/

Support

We're happy to help! If you have any questions, feel free to contact us through our Support Page or email us directly at nobleui.team@gmail.com.

If you enjoyed using our product, we’d really appreciate it if you could take a moment to leave a ⭐️⭐️⭐️⭐️⭐️ rating and a short review. Your support means a lot to us! You can submit your review on the ThemeForest Downloads page.

Copyright © 2025 NobleUI.