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

Light Bootstrap Dashboard Pro

Premium Bootstrap Admin Template
· 4.80/5 (50 Reviews)
948 Downloads
99 Comments
Premium Support
Lifetime Updates
Release: 1 year ago
Update: 6 months 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!

99 Web Developers commented on this product

Report issue

nblake989
  • downloaded
10 months ago

@axelut I just noticed that the gemified version of LBDP is available on UiReady. I purchased the full developer license a few months ago for my rails app and integrated myself. I was reviewing the docs for the rails version and it looks much more straightforward to integrate new versions and rev up the gem if available. I was curious if the gem version lags behind the packaged version sold here or if certain features are excluded? It would be great to have 3rd party support in things like Devise and Kaminari. Is there any chance I can get access to the gem to integrate without paying another $59 for the theme? Sorry for so many questions. Feel free to follow up offline and delete this comment if you see it as inappropriate for the comments section. Thanks!

axelut
  • owner

@nblake989 the Gem that is on our brother website UiReady has all the functionality that the plain HTML/SASS package from our website has. In addition to that, the Gem, has the generators and is integrated with 3rd party gems like Devise, Kaminari etc. We will send you an email with more details about what you need to do to get access to the gem. Best, Alex!
10 months ago

nblake989
  • downloaded
9 months ago

Hey Alex. Do you have a recommendation for a masonry-like, vertical alignment add on that you can recommend to integrate with LBDP? I've developed a new dashboard and a couple of the cards have to use fixed size objects and the bootstrap grid is proving to not allow for the vertical alignment I need to clean up the card presentation. Any input you have is greatly appreciated. Thanks

axelut
  • owner

@nblake989 we recommend you to create 3 x .col-md-3 inside a .row and inside of each "col" you add all the cards that should be in that col like how we created the examples area here: http://demos.creative-tim.com/paper-kit-pro/presentation.html in this way you simulate the Masonry effect without integrating any libraries. Please let me know if that is working for you. Best, Alex!
9 months ago

nblake989
  • downloaded

That would work nicely, except not all of my tiles are uniform in size and have different widths ranging from .col-md-3 to .col.md-3. Standard bootstrap grid isn't very good at managing this.
9 months ago

nblake989
  • downloaded

That should've said from .col-md-3 to .col-md-9
9 months ago

axelut
  • owner

@nblake989 I understand the issue of having the bootstrap grid. Sincerely we didn't integrate the Masonry Library in LBD Pro because we didn't want to make the Dashboard "heavy" with too many plugins when it isn't necessary. Can you please add it and then let us know if you have any feedback and we will try to help you find a solution. Best, Alex!
9 months ago

balintfarago
  • downloaded
9 months ago

What slider are you using? I tried jquery slider but it's not draggable on touch screen devices (known bug). I couldn't make it work with the jquery touch punch plugin so I checked your code but didn't find anything referring to this jquery slider so maybe you're using something else?

balintfarago
  • downloaded

Hi @axelut , thanks for the reply. I finally made it work, but honestly I forgot what was wrong. The touch punch is a must, but the draggable is unnecessary, it should work without it.
9 months ago

axelut
  • owner

@balintfarago Thank you for using our product and sorry for the late response. We are using jQuery UI Slider -> https://jqueryui.com/slider/#default. You can add the jQuery Touch Punch using this steps: 1. Please replace the jQuery UI that is included inside the archive with this new jQuery UI http://code.jquery.com/ui/1.11.4/jquery-ui.min.js because our jQuery UI doesn't have the "draggable event". 2. Please add the jQuery Touch Punch library after you add the jQuery UI library like how they explain inside the official website: https://github.com/furf/jquery-ui-touch-punch#readme 3. Please call the draggable event for the "ui-sliders" inside assets/js/demo.js on line 566 or anywhere after you initialized the sliders with this "$('.ui-slider-handle').draggable();". In this way, you let the browser know that the handles of the sliders can be dragged. We tested this and everything is working fine. You can test it with your phone here: http://lbd.paperplane.io/examples/forms/extended.html Please let us know if that was working for you. Best, Alex!
9 months ago

kontakt4v8
  • downloaded
9 months ago

Hi! Little help needed. I'm using css to make a masonary like layout but without the needed js. There is a little bit of code for the row to work with the layout, but when using this: -moz-column-width: 18em; -webkit-column-width: 18em; -moz-column-gap: 1em; -webkit-column-gap: 1em; The footer goes wild, shown in the screenshot: http://s33.postimg.org/yptdls68v/Wzory_i_Galeria_Tatua_y_Inspiracje_Tatua_owe_Z.png I can provide more code if needed.

axelut
  • owner

@kontakt4v8 thank you for using our product. Can you please send us a link to your website or an archive with the current implementation? We couldn't simulate the issue on our end. Keep in touch, Alex!
9 months ago

chipmunkgeek
  • downloaded
9 months ago

Currently integrating LBDPro into my Rails App which is running on Bootstrap 3. I ran into a few issues... not sure if others have encountered the same... 1. light-bootstrap-dashboard.js, at around Line 18, assumes that the platform, if it is not mac, is Windows. But there are also other platforms, like Linux, in which the browser doesn't support perfectScrollbar. For me, in Linux, this raises a JS error. 2. chartist.min.js, at the very end, makes a reference to chartist.min.js.map, which wasn't included in the LBDPro zip. This was raising a 404 i my app. I had to go track down this dependency myself from Chartist and add it to my project.

axelut
  • owner

@chipmunkgeek thank you for using our product and for the useful feedback. You're right with the platforms, we wanted to make sure that the system that doesn't have "a nice looking" scroll would be replaced by the PerfectScrollbar. We will do more tests on Linux to see if the scrollbar is acting like how it acts on Mac and then we will not activate the perfectScrollbar. If you don't want to work with chartist to change the base code then you can remove that line, it is good just for development purpose, on the production, you don't need the map. We will remove it from the production too. Please let us know if you add the Linux on the list of OSs and perfectScrollbar is not activate if everything is working fine. In the meantime we will check other options. Keep in touch, Alex!
9 months ago

axelut
  • owner

@chipmunkgeek I understand. I'm glad that you found a quick solution. We will update the switch in the next version for sure. Keep in touch, Alex!
8 months ago

chipmunkgeek
  • downloaded
8 months ago

Just a tip for those trying to integrate LBDP into a Rails app using SASS... Originally, my application.scss had @import 'bootstrap' followed by @import 'light-bootstrap-dashboard'. I soon realized that LBDP had some !default variables (in _variables.scss) that need to be set BEFORE Bootstrap's own default variables are set. But, you can't just @import 'light-bootstrap-dashboard' before @import 'bootstrap', because there are dependency issues. The solution is to explicitly @import 'lbd/variables' FIRST, and then @import 'bootstrap' and @import 'light-bootstrap-dashboard'. That worked for me.

axelut
  • owner

@chipmunkgeek thank you for using our product and for the solution of the problem. We will do some more tests to see why is that happening because on all our pages, live examples and inside the plain HTML Template we include bootstrap.css followed by light-bootstrap-dashboard.css and everything is working fine. So having the variables from LBD before the Bootstrap's variables it's a little bit weird but we will find the issue. Here is also the Free version of LBD as a Ruby Gem: https://uiready.io/items/light-bootstrap-dashboard-rails-version Please check it and let us know if you have any feedback. Best, Alex!
8 months ago

chipmunkgeek
  • downloaded

@axelut I think this is the difference between using the straight CSS version versus the SASS version. For example, look at the "Single Select" on the Extended Forms page of the dashboard demo. The padding-top for the button is 8px, which is what you have defined in light-bootstrap-dashboard.css at line 4209. This overrides what was defined in bootstrap.min.css, which was originally 6px. So, yes, in straight CSS, you want light-bootstrap-dashboard.css *after* bootstrap.min.css, so that you can do these kinds of overrides. But in SASS, the .btn is given its padding based on the $padding-base-vertical variable, which is defined using !default, meaning "define this unless it is already defined". LBDP wants it to be 8px, while Bootstrap wants it to be 6px. But, in this SASS case with !default - it's "whoever defines it first wins" - so you will want LBDP's declaration *first*, because then the definition can't get overridden by Bootstrap. There's nothing wrong with any of the LBDP code - it's just a matter of making sure that your SASS implementation users know to include LBDP's _variables.scss before Bootstrap's.
8 months ago

axelut
  • owner

@chipmunkgeek yeeees, now I see what you wanted to say. You're 100% right, when bootstrap is coming as SASS files, then you've got that case because of the defaults. Thank you for the information. We will add this in the documentation in case there are other persons who want to manually integrate it in rails. Keep in touch, Alex!
8 months ago

chipmunkgeek
  • downloaded

@axelut Still having a great experience with LBDP so far. Quick question - I noticed that you've integrated (and modified the styling for) the Switch from Mattia Larentis. It looks like you're working with v1.3 of the switch, but this has since been updated to the official "Bootstrap Switch" now at v3.3.2. Your link to "Larentis Switch" in the LBDP documentation is dead now, and since it's such an old version, it's difficult to know exactly how one might use the v1.3 switch. Are there plans to update LBDP to use the more recent version of Bootstrap Switch?
8 months ago

axelut
  • owner

@chipmunkgeek thank you for the information. Till now we didn't receive any issues or requests for the Switch so it wasn't on our update list. But if you said they moved to a better version, yes we will update it too. Did you try to integrate it yet?
8 months ago

chipmunkgeek
  • downloaded

@axelut I wanted to change the switch on-color and off-color, and I needed to handle an event when the switch is clicked. This just meant writing some additional JS and some override CSS code. For now, I was able to get what I needed done by doing this. But it does some like there are some huge improvements between v1.3 (April, 2013) and v3.0 (April, 2014). This includes the ability to set some of the above things as options via JS.
8 months ago

kontakt4v8
  • downloaded
8 months ago

Hi, have you tested LBDP on the built in samsung mobile (galaxy s3) browser? I've tested it today, and the menu seems unscrollable. Any way to fix it?

axelut
  • owner

@kontakt4v8 thank you for using our product and for the feedback. At this moment, we have only Galaxy S6 and S7 as physical devices for testing, we use browserstack.com for more devices (they give us access to physical devices and emulators). We tested and couldn't find the issue. Please check these 2 videos for Chrome and Default Browser (https://sendvid.com/cwc2ie7f and https://sendvid.com/fjojlkw8). We will try to do more tests till we find the bug. We have a scrollbar plugin that is creating a "smooth" scroll and maybe that is the problem. Can you please go to light-bootstrap-dashboard.js and comment the line 19 where we activate the ".perfectScrollbar()" function? Maybe there is a conflict between that library and the browser scroll function. Please let us know the feedback. Best, Alex!
8 months ago

greatbk
  • downloaded
8 months ago

I have a little problem. checkbox always located front of layer. (left side) I wish it moved center of layer.

axelut
  • owner

@greatbk thank you for using our product. Can you please give us more details about the issue? If you want to send us any images with the look of the checkbox please send an email at hello[at]creative-tim.com and we will assist you there.
8 months ago

kontakt4v8
  • downloaded
7 months ago

Where is the LBDP changelog, and how can I check when the latest update was?

axelut
  • owner

@kontakt4v8 please go upper in this page where is the "Description" press on view more, then you will see at the end of the description the "change log" link. There are all the details there with the date and what was changed in every version. We will add the change logs in your downloads page on your account so it will be easier to see what is new. Best, Alex!
7 months ago

adrian.voinicu
  • downloaded
7 months ago

Not sure if this has been mentioned before but calc(100% - $sidebar-width) doesn't compile correctly. This should be calc(100% - #{$sidebar-width}).

axelut
  • owner

@adrian.voinicu thank you for using our product and for pointing out. Can you please give us more details about the SASS compiler that you use? We use Koala and everything was compiled fine. We will make the necessary adjustments if the appears in other compilers. Best, Alex!
7 months ago

adrian.voinicu
  • downloaded

@axelut.alex , I don't think this is compiler related. It seems to me that it was intended that way, at least judging by this: https://github.com/sass/sass/issues/818 (I know it's an old topic but it still hasn't been closed). Also, do you plan to make this compatible with Bootstrap 4 anytime soon? Thanks!
7 months ago

adrian.voinicu
  • downloaded

@alexut.alex Just rememberd: i found the variable in the compiled CSS.
7 months ago

axelut
  • owner

@adrian.voinicu thank you for the details on the github issue and sorry for the late response. It's clear that the issue is not closed there but when I check the our official compiled CSS that is in the product archive and on our live demo the .main-panel has the width: calc(100% - 260px); which make me think that everything was working fine with the SASS compiler. Otherwise, the view of the Dashboard would be broken, because that width is crucial for the "Left Sidebar" and "Right Main Panel" alignment. It's weird that you found that in the compiled CSS, we will make some more tests to see why your compiled CSS is different than our compiled CSS. We will encapsulate the variables in calc, in a future update, to make sure everything is working fine in all the use cases of the SASS. We will update the product to BS4 when they will release, at least, a stable Beta Version for production. Best, Alex!
7 months ago

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

Why our customers appreciate us

Other

Very friendly, well written code. I enjoyed building an MVP with this template.

Design Quality

Design Quality

great