Free Bootstrap 4 Admin Dashboard Template

  • By Colorlib
  • Last update: Jan 8, 2023
  • Comments: 13

gentelella

Gentelella Admin is a free to use Bootstrap admin template. This template uses the default Bootstrap 4 styles along with a variety of powerful jQuery plugins and tools to create a powerful framework for creating admin panels or back-end dashboards.

Theme uses several libraries for charts, calendar, form validation, wizard style interface, off-canvas navigation menu, text forms, date range, upload area, form autocomplete, range slider, progress bars, notifications and much more.

We would love to see how you use this awesome admin template. You can notify us about your site, app or service by tweeting to @colorlib. Once the list will grown long enough we will write a post similar to this to showcase the best examples.

Theme Demo

Gentelella Bootstrap Admin Template

Template Demo

Documentation

Documentation

Installation via Package Manager

Our goal is to make it installable on different Package Manager! Do you want to use it on your favorite Package Manager and you know how? Pull request all the way!

As of now, this is some installation available:

Bower

bower install gentelella --save

npm

npm install gentelella --save

yarn

yarn add gentelella

How to contribute

To contribute, please ensure that you have stable Node.js and npm installed.

Test if Gulp CLI is installed by running gulp --version. If the command isn't found, run npm install -g gulp. For more information about installing Gulp, see the Gulp's Getting Started.

To have all gulp dependencies run npm install

If gulp is installed, follow the steps below.

  1. Fork and clone the repo.
  2. Run gulp, this will open gentelella on your default browser
  3. Now you can code, code and code!
  4. Submit a pull request

Gentelella for other platforms and frameworks

Let us know if you have done integration for this admin template on other platforms and frameworks and we'll be happy to share your work.

Scripts included:

  • Bootstrap
  • Font Awesome
  • jQuery-Autocomplete
  • FullCalendar
  • Charts.js
  • Bootstrap Colorpicker
  • Cropper
  • dataTables
  • Date Range Picker for Bootstrap
  • Dropzone
  • easyPieChart
  • ECharts
  • bootstrap-wysiwyg
  • Flot - Javascript plotting library for jQuery.
  • gauge.js
  • iCheck
  • jquery.inputmask plugin
  • Ion.RangeSlider
  • jQuery
  • jVectorMap
  • moment.js
  • Morris.js - pretty time-series line graphs
  • PNotify - Awesome JavaScript notifications
  • NProgress
  • Pace
  • Parsley
  • bootstrap-progressbar
  • select2
  • Sidebar Transitions - simple off-canvas navigations
  • Skycons - canvas based wather icons
  • jQuery Sparklines plugin
  • switchery - Turns HTML checkbox inputs into beautiful iOS style switches
  • jQuery Tags Input Plugin
  • Autosize - resizes text area to fit text
  • validator - HTML from validator using jQuery
  • jQuery Smart Wizard

Other templates and useful resources

  • Free Bootstrap Admin Templates - List of the best Free Bootstrap admin dashboard templates that are available for free for personal and commercial use.
  • Free Admin Templates - Long list of the best free HTML5 powered admin dashboard templates. Available for personal and commercial use.
  • Angular Templates - List of the most popular admin templates based on AngularJS.
  • HTML Admin Templates - Most of these templates are based on AngularJS and uses a stunning Material design.
  • Bootstrap Admin Templates - List of premium Bootstrap admin templates that uses a minimal flat or material design. Majority of these themes uses AngularJS but HTML5 versions are also available.
  • WordPress Admin Templates - List of the best WordPress admin dashboard templates and plugins that will add a personal touch to your WordPress dashboard.
  • WordPress Themes - A huge selection of the best free WordPress themes that are all licensed under GPL and are available for personal and commercial use without restrictions.

License information

Gentelella is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software. But you always need to state that Colorlib is the original author of this template.

Project is developed and maintained by Colorlib and Aigars Silkalns

Github

https://github.com/puikinsh/gentelella

Comments(13)

  • 1

    Using & developing this template is a nightmare

    Hi.

    To make the first sentence nice - thank you for a very nice looking admin portal template.

    But...

    I am trying to integrate it with new page I am building and I do not quite understand the development methodology if any is present.

    My doubts:

    Project using

    1. What files should I include in my project to have this template working
    2. vendors folder is included in the npm dependency, though it is simply downloaded bower dependencies ...?
    3. How should I include the project dependencies then?

    Project development

    1. You are using scss and sass compiler, but you are writing css code inside custom.scss
    2. The custom.scss are 4807 lines long in one file !!!
    3. no tests?!
    4. html is repetitions all around (menu, topnav, footer).

    Place for improvement

    1. Partition the scss main file - custom.scss
    2. scss build should have one entry point - sass('src/scss/*.scss', options) !?
    3. Partition the js
    4. Consider using some modularize template engine for html files

    I will probably have to do some of this work anyway since I want to figure out how to use this project, but I do not know if anyone is interested in merging those fixes to master

  • 2

    How to collapse side menu on start?

    I already try Method#1: Set body class "nav-md" > "nav-sm" Method#2: $('#menu_toggle').click(); on document ready

    Menu is collapsed but side menu did work correct. It's still slide down.

    Please advise.

  • 3

    Dynamic tables with buttons + ASP.NET Grid not working?

    Hello,

    if I use a ASP.NET grid for the table and fill it with data, the buttons won't appear anymore. Why? I renamed the IDs, renamed the IDs in the function in the script too, but nothing new.

  • 4

    Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

    When i run Gulp google cloud. I am getting below response please can you tell how to execute the in google cloud(Linux).

    sudo gulp [14:09:01] Using gulpfile ~/ATLAS/gulpfile.js [14:09:01] Starting 'browser-sync'... [14:09:01] Finished 'browser-sync' after 14 ms [14:09:01] Starting 'watch'... [14:09:01] Finished 'watch' after 14 ms [14:09:01] Starting 'default'... [14:09:01] Finished 'default' after 10 μs [BS] Access URLs:

       Local: http://localhost:3000/./production/index.html
    External: http://:3000/./production/index.html
    

          UI: http://localhost:3001
    

    UI External: http://:3001

    [BS] Serving files from: ./ [BS] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

  • 5

    Hide PNotify welcome message.

    Currently in https://github.com/puikinsh/gentelella/blob/master/build/js/custom.js#L1840 a welcome message is added if PNotify is found:

    if( typeof (PNotify) === 'undefined'){ return; }
    			console.log('init_PNotify');
    			
    			new PNotify({
    			  title: "PNotify",
    			  type: "info",
    			  text: "Welcome. Try hovering over me. You can click things behind me, because I'm non-blocking.",
    			  nonblock: {
    				  nonblock: true
    			  },
    			  addclass: 'dark',
    			  styling: 'bootstrap3',
    			  hide: false,
    			  before_close: function(PNotify) {
    				PNotify.update({
    				  title: PNotify.options.title + " - Enjoy your Stay",
    				  before_close: null
    				});
    
    				PNotify.queueRemove();
    
    				return false;
    			  }
    			});
    

    Why is this?

    This makes sense for the demo site, but should not be part of the release on bower.

  • 6

    Could not find an option named "sourcemap".

    When starting "gulp sass" or "gulp sass-minify" I get the following error. Which sass Version do I have to use to build those files correctly? Why is sass not installed with package.json?

    npm install -g sass
    /usr/local/bin/sass -> /usr/local/lib/node_modules/sass/sass.js
    /usr/local/lib
    └── [email protected] 
    
    [21:00:51] Using gulpfile ~/Dev/gentelella/gulpfile.js
    [21:00:51] Starting 'sass'...
    [21:00:51] Could not find an option named "sourcemap".
    [21:00:51] Usage: dart-sass <input>
    
        --[no-]stdin    Read the stylesheet from stdin.
    -s, --style         Output style.
                        [expanded (default), compressed]
    
    -c, --[no-]color    Whether to emit terminal colors.
        --[no-]trace    Print full Dart stack traces for exceptions.
    -h, --help          Print this usage information.
        --version       Print the version of Dart Sass.
    [21:00:51] Finished 'sass' after 424 ms
    
  • 7

    compact menu, third level fail to open

    Hi, after click to compacting side menu, I cannot open a third level menu because on click to second level it collapse image In the image you can see, if I click on "level one" the menu collapse instaed of open the third level ge52a7b148-413c-11e7-8003-ff626a7150e8

    thanks

  • 8

    No scrollbar in .child_menu when sidebare is collapsed

    When we collapse the sidebar and open a menu element with a child menu, then the child menu will have no scrollbar. If I add it manually in the developer console of Firefox to the <ul>

    $('.child_menu').mCustomScrollbar({ autoHideScrollbar: true, theme: 'minimal', mouseWheel:{ preventDefault: true }, scrollInertia: 0 });

    Then a scrollbar appears but destroys the style of the child menu and scrolling does not work. Before ... 2017-05-03 15_59_51-web

    ... after the command above 2017-05-03 16_11_32-web

    Is there a quick fix for adding a Scrollbar to a child menu?

  • 9

    build/images directory is missing after npm install

    Morning everyone!

    After npm install --save gentelella (@1.3.0) the build/css/custom.min.css is looking for a /build/images/** directory and some files. Here, on repository i can see it clearly, but in my node_modules is missing.

    Did i something wrong?

  • 10

    Dynamic URL navigation problem

    When I go to dynamic URL : /hello/world/1 the navigation is collapsed. but when I'm in /hello/world it shows the real button in navigation. How can I get navigation work with dynamic URLs?

  • 11

    Vendors should not be included!

    The vendor scripts should not be included with this package. When you "bower install" this package just for the CSS/JS portions, its not good to have all the other 3rd party parts in it as well. If people want them, they would include it in their own bower file and have the latest versions.

  • 12

    Bump gulp-autoprefixer from 7.0.1 to 8.0.0

    Bumps gulp-autoprefixer from 7.0.1 to 8.0.0.

    Release notes

    Sourced from gulp-autoprefixer's releases.

    v8.0.0

    Breaking

    • Require Node.js 12 a953087

    Improvements

    • Upgrade dependencies a953087

    https://github.com/sindresorhus/gulp-autoprefixer/compare/v7.0.1...v8.0.0

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Note: This repo was added to Dependabot recently, so you'll receive a maximum of 5 PRs for your first few update runs. Once an update run creates fewer than 5 PRs we'll remove that limit.

    You can always request more updates by clicking Bump now in your Dependabot dashboard.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
  • 13

    Django-Mezzanine-Gentelella work together or options?

    I have a project and the client has a strong preference for gentelella as a look to be fitted with a mezzanine admin dashboard. is this doable.

    We want to combine this https://colorlib.com/polygon/gentelella/index.html With a Django CMS mezzanine site we are also creating.

    Also, will this work as a front end or do I need to add a bootstrap theme to it?