Light Bootstrap Dashboard Pro
Icon html
Icon sass
Icon sketch
Icon bootstrap

😍 Case Study: "How we built from scratch Light Bootstrap Dashboard" on one of the biggest publications on Medium: FreeCodeCamp.

Light Bootstrap Dashboard Pro

Premium Bootstrap Admin Template
· 4.80/5 (91 Reviews)

License

1,318 Downloads
131 Comments
Premium Support
Lifetime Updates
Release: 1 year ago
Update: 1 month ago
Icon html
Icon sass
Icon sketch
Icon bootstrap

120 Handcrafted Components

15 Customized Plugins

24 Example Pages

Bootstrap Based

Documentation

Fully Responsive

Product certified by: Creative Tim

Get Free Demo

Learn more about Light Bootstrap Dashboard Pro in the light demo version. It has features from the full version. We hope you will like this introduction to this product!

What is in Demo?
  • Components · 16
  • Plugins · 4
  • Examples Pages · 4
  • -
  • -
  • -
What is in PRO Version?
  • Components · 120
  • Plugins · 15
  • Example Pages · 24
  • + Documentation
  • + SASS Files
  • + Sketch Files
Get Free Demo
Opt lbd thumbnail

We are here to help you!

131 Web Developers commented on this product

Report issue

andriesei_andrei
  • downloaded
6 months ago

Hi Alex, Trying to customize a bit the sidebar wrapper. I want a custom color (the ones defined in your "tip" to change data-color are not good for my project). Also, I want to remove the background image in there. Can you tell me how to do it? Thanks, Andrei

axelut
  • owner

@andriesei_andrei thank you for using our product. To remove the image from the sidebar you can simply remove the "data-image" property from the div.sidebar. To change the colors you can create your own sidebars by going to assets/sass/lbd/_sidebar-and-main-panel.scss around 224 you will see how we made the colors. You can send to the line-gradient mixin colors like #000000 or you can make variables like how we have for $color-red. Then you need to compile the light-bootstrap-dashboard.scss using a compiler like Koala App. Just make sure you set the output file for the compiler to assets/css/light-bootstrap-dashboard.css. Hope this helps you. Please let us know how that things are going. Best, Alex!
6 months ago

andriesei_andrei
  • downloaded
6 months ago

Hi guys, me again! The platform looks and feels great. Yet, there is a small UX problem that I've noticed, and it relates to the sidebar and the fact that the user has to scroll down on it to see its contents in case there are a lot of pages and subpages (that scrolling is not stellar either). For desktop, is there any fast way to tweak the sidebar items to look something like this: http://prnt.sc/eprz4w Thanks!

axelut
  • owner

@andriesei_andrei I understand but from what we know the option that you presented for desktop and having that popup, outside of the sidebar area, cannot be implemented just using CSS because you have something like "overflow:scroll" for the sidebar container and that means you cannot see anything that is outside of the sidebar. Did you implement it like that? Can you share with us a link? I'm very curious about the solution. For the mobile, at this moment I don't have any ideas on how to make it better from the UX perspective. Did you see on any other dashboard a better solution that we can take into consideration? Best, Alex.
6 months ago

andriesei_andrei
  • downloaded
6 months ago

for mobile is ok, but for desktop why not just remove the scroll at all and implement the tooltip on the right solution?

axelut
  • owner

@andriesei_andrei most of our users want the sidebar to be "fixed" on the left side, so they have all the time access to it. To achieve that, you need a scroll inside it to make sure all the elements can be accessed. Makes sense? Do you have some examples for the tooltip on the right? I'm curious to see if that exist somewhere and check their implementation. Another option would be to make everything small, the text, the icons, the submenus etc. in this way they will take less space on the screen. Best, Alex!
5 months ago

andriesei_andrei
  • downloaded
5 months ago

Alex, Here is a good example with documentation and everything: https://codyhouse.co/gem/responsive-sidebar-navigation/ Notice how the sidebar is fixed, how the subpages appear as a tooltip on the right when hovered and how the system works on mobile. Thanks

axelut
  • owner

@andriesei_andrei thank you for the example. We wanted to have something like that but there is an issue with it, if you have more children elements in the last item, like in Users (5 children) and the parent is at the bottom of the sidebar you are unable to check the kids 4-5. Here is a quick example: http://imgur.com/a/yunpP So that was 1 of the reasons on our Sidebar Mini example we didn't set the sidebar as a fixed element and we let it scroll with the page. Please let me know if you see a solution or any idea for the problem that the guys from codyhouse and also us have. Best, Alex!
5 months ago

andriesei_andrei
  • downloaded
5 months ago

Can you guys at least add an autoscroll down when an item with children located at the bottom of the sidebar is clicked on?

axelut
  • owner

@andriesei_andrei that sounds like a good idea, something like this: http://jsfiddle.net/qKGv8/ ? Which will autoscroll after you enter on a specific page? Best, Alex!
5 months ago

jenniferlspriggs
  • downloaded
5 months ago

Hi! I'm having some issues implementing the customizable-select and datetime pickers and I'm not sure where I'm going wrong.

axelut
  • owner

@jenniferlspriggs thank you for using our product. Can you please give us more details about what is not working? Do you have any console errors? Please also share with us a link to your web app. In the meantime please make sure that you call these methods: $(".selectpicker").selectpicker(); line 96 light-bootstrap-dashboard.js and the one for datetimepicker from demo.js line 569: $('.datetimepicker').datetimepicker({...}); Best, Alex
5 months ago

kontakt4v8
  • downloaded
5 months ago

@axelut Is there anyway I can delete the perfect scrollbar? It seems to cause issues, such as; - bad heatmap recordings, - can't use space/pagedown etc., - browsers seems not to understand it, after refresh it jumps back to top. And some more. Anyway to switch it off, and use native?

axelut
  • owner

@kontakt4v8 we answered about the issue in GitHub and we will come back with a solution soon. I'll let here the link: https://github.com/timcreative/light-bootstrap-dashboard-pro/issues/21 maybe there will be other persons who want to do the same things. Best, Alex
5 months ago

markus.karlsson
  • downloaded
5 months ago

Scrolling doesn't work properly on Windows IE or Chrome. The page only scrolls when the side menu is minimized. Workaround?

axelut
  • owner

@markus.karlsson thank you for using our product. Can you please make sure you have the latest v1.3.0 version? Also, can you give us a link to your web-app and let us know which windows and version of IE and Chrome you have, so we can reproduce it on our system? Best, Alex!
5 months ago

danilo.palomino
  • downloaded
5 months ago

I still can not solve the problem that disables the scroll above an iframe :/

axelut
  • owner

@danilo.palomino thank you for using our product and sorry for the late response. Please add the class .ps-child to the iframe, so the PerfectScrollbar will not overwrite that scrollbar. More about the PerfectScrollbar can be found here: https://github.com/noraesae/perfect-scrollbar Please let us know if that was working. Best, Alex!
4 months ago

dariodp 4 months ago

@axelut I am unable to use bootstrap-datepicker. When I click on the date box, the calendar doesn't pop up. If I remove light-bootstrap-dashboard.css it works correctly. I tried to remove all occorrences of .dropdown-menu from lbd css but nothing changes. Any suggestion? Thank you!

axelut
  • owner

@dariodp thank you for using our product. Can you please give us more details about what version you have? Bootstrap DateTimePicker is working fine in our example here: http://demos.creative-tim.com/light-bootstrap-dashboard-pro/examples/forms/extended.html Best, Alex!
4 months ago

You have to be logged in to post a comment. Login here.

Why our customers appreciate us

Design Quality

This template look simple but elegant, i very like it. :)

Design Quality

Nice design

Design Quality