I will share a simple admin dashboard bootstrap 4 templates with menu positions on the sidebar. If you do not have more funds to buy a premium admin dashboard, you can use this template for your commercial application for free.
This article is a continuation of the article “Create Cool Simple Sidebar Menu with Bootstrap 3 and Font Awesome,” where the template that I shared uses bootstrap framework 3. The simple admin dashboard uses bootstrap version 4, which structure is more stable than Bootstrap 3.
Unfortunately, we cannot directly replace bootstrap 3 to 4 cores because of the different class names for each version. So that this admin dashboard is published, which supports Bootstrap 4.
Before using, first, read the system requirements so that the admin dashboard can run properly.
1. CSS Framework Bootstrap 4 (version 4.5)
2. JQuery 3.5.1
3. Font-awesome Icon (version 4.7)
The bootstrap 4 admin dashboard layout is quite simple, you can modify it as needed. The initial description of this template as shown below.
This admin theme uses Jquery code to toggle the sidebar menu.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $("#menu-toggle").click(function (e) { e.preventDefault(); $("#wrapper").toggleClass("toggled-2"); $(".sidebar-nav-item").removeClass("show-nav"); }); $(document).ready(function () { $(".sidebar-nav-item").click(function () { let el = $(this); $(".sidebar-nav-item").not(el).removeClass("show-nav"); if (!el.hasClass("show-nav")) { el.addClass("show-nav"); } else { el.removeClass("show-nav"); } }); }); |
To get it for free, you can directly download via the GitHub page https://github.com/seegatesite/simple-admin-dashboard-bootstrap-4
See the demo project at https://seegatesite.github.io
Hopefully, the simple bootstrap 4 admin dashboard above is useful and can help you make better applications. On another occasion, I will share the Bootstrap Admin Dashboard 4 for React JS.
Leave a Reply