❤️ Creative Tim Club - Access all our Present & Future Premium Products

Light Bootstrap Dashboard PRO React

Light Bootstrap Dashboard PRO React

Premium Bootstrap React Admin Template

· 4.90/5 (114 Reviews)
Get Free Demo

Premium Bootstrap React Admin Template

Product description


Light Bootstrap Dashboard PRO React is a premium admin dashboard template designed to be beautiful and simple. It is built on top of React Bootstrap, using Light Bootstrap Dashboard PRO and it is fully responsive. It comes with a big collection of elements that will offer you multiple possibilities to create the app that best fits your needs. It can be used to create admin panels, project management systems, web applications backend, CMS or CRM.

The product represents a big suite of front-end developer tools that can help you jump start your project. We have created it thinking about things you actually need in a dashboard. Light Bootstrap Dashboard React contains multiple handpicked and optimized plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customization of this product.

It comes with 6 filter colors for the sidebar (black, azure,green,orange,red,purple) and an option to have a background image.

Special thanks go to

We are very excited to share this dashboard with you and we look forward to hearing your feedback!

Product certified by: Creative Tim
Light Bootstrap Dashboard PRO React - Fully Coded and Responsive HTML5
Light Bootstrap Dashboard PRO React - Sass Files for Professional Front End Developers
Light Bootstrap Dashboard PRO React - Sketch Files for Professional Designers
Light Bootstrap Dashboard PRO React - Crafted with Bootstrap - the most popular Front End Framework
Light Bootstrap Dashboard PRO React - JavaScript library for building user interfaces
Downloads
1,030
Version
2.0.1
Changelog
Updated
1 year ago
Released
6 years ago
Reviews
Handcrafted Elements
60
Customized Plugins
13
Example Pages
4
Premium Support
Documentation
Fully Responsive

Trusted by 2,466,332 developers and these companies

Freelancer

Good for a personal or client web/mobile app.

$49

Startup

Build your startup or client web/mobile app.

$149

Company

Perfect for web/mobile apps or SaaS projects.

$249

*one time payment - no hidden fees, no subscription

Creative Tim Club

Lifetime Access to all our Present & Future Premium Products!

$749 $349

Documentation   
Full Code   
Designer Files   
Use in SaaS   
Projects    1 1 unlimited unlimited
Team Size    1 up to 5 up to 20 up to 20
Tech Support    support support priority support priority support
Free Updates    6 months 12 months 12 months unlimited

Secured Payment by 2Checkout with:

Info: If you are a Registered Company inside the European Union you will be able to add your VAT ID after your Press "Buy Now"

Frequently asked questions

You can use our products to create an application where the end user is charged with a monthly/annually subscription plan (SaaS - Software as a Service).
The Freelancer license is aimed at people who work on their own. It grants you the right to use the purchased product only for one project (either yours or for a client). This license is not compatible with SaaS-based projects.

The Startup license is aimed at smaller teams. It grants you and your team (up to 5 people) the right to use the purchased product only for one project (either yours or for a client). This license is not compatible with SaaS-based projects.

The Company license is aimed at agencies or larger teams. It grants you the right to create other licensed products base on the template that you purchase form us. This license it's compatible with SaaS-based projects.

The Enterprise license is aimed at large companies with multiple projects. It grants you the right to create any kind of software, SaaS, digital products and sell them. For restrictions, please check here

Also, the differences between our 3 types of Licenses is given by the Tech Support / Free Updates availability and Team Size.

More info here.
The differences between the Free and Pro products consists of the number of components, plugins, sections, pages in each.

More info here.
You can upgrade from one license plan to the next one whenever you want simply by paying the cost difference. You only have to send us an email in which you specify the product that you have and the Order ID. We will give you an unique coupon for the upgrade.

More info here.
Yes, of course! You can use the PRO product for an open source project if you add in the Readme file (on github) or in the description of your product that you built the project using “X product from Creative Tim” and a link to the product page.

More info here.
You don't have any restrictions using the Enterprise License; you just cannot create products or businesses that are in direct competition to us using our products:

  • You can’t re-distribute the Item as stock, in a tool or template, or with source files. You can’t do this with an Item either on its own or bundled with other items. You can’t re-distribute or make available the Item as-is or with superficial modifications. For example: You can’t license an item and then make it available as-is on your website for your users to download.

  • You can’t use the Item in any application allowing an end-user to customize a digital or physical product to their specific needs, such as an “on-demand”, “made to order” or “build it yourself” application. You can use the Item in this way only if you purchase a separate License for each final product incorporating the Item that is created using the application. For example: you can't create a website builder.
Depending on the License you purchase, you can use our products to either code a website/web application for you, for a client, or for multiple clients, which will be hosted on one or multiple domains:

  • For example, if you purchased the Freelancer License or Startup License, you can create only one website (for you or a client). Same, if you have multiple subdomains, like "test.yoursite.com" or "dev.yoursite.com", you can use the Freelancer License or Startup License.

  • If you want to create multiple websites, you will need a bigger License (like Company or Enterprise). Same, if you have a complex application like a SaaS and have "client1.yoursite.com" and "client2.yoursite.com" and "clientx.yoursite.com", you will need a multi-domain License like Company or Enterprise.
Depending on the License type you purchased, one or more developers (from your team, for example) can access the product:

  • If you purchased the Freelancer License, only you (one developer) can use the product.

  • If you purchased the Startup License, up to 5 developers (including you) can use the product.

  • If you purchased the Company License, up to 20 developers (including you) can access the product.

  • If you purchased the Enterprise License, you can work with a bigger team - more than 20 developers can access the product.
Here are the steps to give product access to your team members.
It consists of the product technical manuals like getting started, build tools, and it also describes every component with code examples.
It means that you receive access to the entire code for HTML, JS, and SCSS files depending on the different packages of each product.
When you buy our products you have access to our Support Team so you can submit any ticket to us regarding product functionalities and bug fixes (learning and tutorials related requests are not included). You will get responses directly from the product’s creators in 24 hours for regular Support and in a couple of hours for Priority Support (during business days).
Depending on your license type, you have a determined period when you receive product updates that include bug fixes and new features.

More info here.
Please send us an email at [email protected]. We will send you an upgrade coupon for your desired Bundle, and you will only pay the price difference.
Yes, you can. It is available for all Licenses type as long as the support included in the License is still valid.

More info here.

Get Free Demo

Learn more about Light Bootstrap Dashboard PRO React 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? What is in PRO Version?
Elements 30 60
Plugins 3 13
Examples Pages 7 4
Full Coded
Documentation
SASS Files
Designer Files
Premium Support

We are here to help you!

66 Web Developers commented on this product

infot6d
  • downloaded
5 years ago

Hi, do you have a loader or a spinner in this template? I've been searching for it but can't find any. Thanks.

ctmployee
  • downloaded

Hello @infot6d . I think you will find what you need at this link: https://timcreative.github.io/light-bootstrap-dashboard-pro-react/#/documentation/progress-bars . Unfortunately we do not have spinners in our products, but we will consider on adding those too. Hope that information helps you. Please let us know if we can help you with anything else. Best, Manu.
5 years ago

ruetheday6969
  • downloaded
5 years ago

Hi, I had a question about setting the background for pages such as dashboard. I see how you provide the ability to set the background in other areas like the sidebar and even on individual pages but I cannot seem to find where you control the background image on say for example dashboard.jsx? Where and how can I set a background image to be displayed similar to how you do this with the sidebar component ?

ctmployee
  • downloaded

Hello again @ruetheday6969 , we do not support adding background images to our dashboard pages, but this is fairly ease to do. You just need to add a style on the <div className="main-content"> , for example <div className="main-content" style={{ backgroundImage: "url(" +require("assets/img/full-screen-image-3.jpg") + ")" }}> . Or you could add this style in our scss on the .main-content class. Hope that information helps you. Please let us know if we can help you with anything else. Best, Manu.
5 years ago

ruetheday6969
  • downloaded

Ok this worked, thank you. Is there a way to set the background color and/or images to the header and headerlinks.jsx files? Not sure I can see where that would be done?
5 years ago

ctmployee
  • downloaded

It is the same as the one with the ".main-content", but this time you need to put it on "Navbar.Collapse" component of the navbar which you can find in src/components/Header/Header.jsx. Best, Manu.
5 years ago

paul.vandyk
  • downloaded
5 years ago

@creativetim Hi Tim, is there any possibility you can also include a PSD version of this so that i can sync it to my Invsion, currently you only have sketch and since I'm on windows :( I cannot use it to prototype, I tried using the site https://rapidui.io/ but it notifies that the version of the sketch is too old. Much appreciated.

ctmployee
  • downloaded

Hello @paul.vandyk and thank you for your interest in using our products. I am sorry for the late response. I've just sent you an email with more details on this matter. Best, Manu.
5 years ago

ruetheday6969
  • downloaded
5 years ago

Which css is used to manage the components? I have been editing and customizing the light-bootstrap-dashboard.css under the sass directory. However, I noticed that when I restart my application several settings that were in this file are reverting back to previous settings. Is there a better place I should editing to make sure the changes in the css file stay?

ctmployee
  • downloaded

Hello, if you want to work just with pure css, than you should change our scripts inside package.json to those from create-react-app, but i think it is much easier to change the scss. So, if you keep our scripts in your app, than you can not change directly the css file, because that file is being recompiled every time. You need to work with the .scss files. Hope that information helps you. Please let us know if we can help you with anything else. Best, Manu.
5 years ago

ruetheday6969
  • downloaded
5 years ago

Can you provide some guidance on how to link a page to say links that are found in the headerlinks.jsx? For example, I want to wire up the login and logout drop down menu option that lives in the headerlinks.jsx. I was able to configure a handler for the event and even pass login and logout state from 2 lower level children back to the parent dashboard layout page by passing a function from the parent to all children, which is then called by the children to set state back in the parent. This part works well, however, I am not connecting the dots on where and how I can make a call to pop a page, like say the login page from an event handler located in headerlinks.jsx. I believe would use your routing engine but an example would be helpful!

ctmployee
  • downloaded

Hello again @ruetheday6969 , i am really sorry, but i do not understand this question. Can you please be more explicit? Thank you, Manu.
5 years ago

ruetheday6969
  • downloaded

I would like some sample code or guidance on how I can wire up a page or call a route when a user clicks on a link say in the headerlinks.jsx. I am not sure how to call your routing configuration meaning I see how the routes are setup but lets say that I am in an event handler for a menu item. What is the all in the event handler to pop up a page? For example, I have a link on the main dashboard for "Login", user clicks that I fire off the event handler in the class for the the click event, and now I want to pop up your login page, how is this done?
5 years ago

ctmployee
  • downloaded

Do mean you want to add a Link in our HeaderLinks component that redirects users to a login page? If this is the case, just add a Link component in the HeaderLinks. So, inside "src/components/Header/HeaderLinks.jsx", inside the Nav component, if you haven't done any changes to our HeaderLinks component, it should be line 27. Add a NavItem with the route you have your login page, something like: <NavItem eventKey={3} href="#/pages/login-page"><i className="fa fa-line-chart" /><p>Login Page</p></NavItem>. Hope that information helps you. Please let us know if we can help you with anything else. Best, Manu.
5 years ago

ruetheday6969
  • downloaded
5 years ago

Ok that makes sense, how about passing props to that link? Do you have a way for me to pass props from the HeaderLinks.jsx to the login page? I would like to pass it a state defined in HeaderLinks.jsx ?

ctmployee
  • downloaded

I don't think you can do that directly. I know that you can pass props from a parent to a child and vice-versa in React, but through routes i haven't heard of. I am sorry but we can not help you with this. Best, Manu.
5 years ago

ruetheday6969
  • downloaded
5 years ago

I was working with your React Table component and I noticed for the demo you provide a simple alert message to pop up the record row for which the edit button was pressed. Can you provide some similar code sample for how I could pop one of your input forms up and not an alert message? I am trying to glue your table to a single input form for editing records that are in the table. Thanks you in advance!

ctmployee
  • downloaded

Hello again @ruetheday6969 . Well this is really simple. You just need to change the onClick function from our demo. In src/views/Tables/ReactTables.jsx, at line 91, you will find our demo button for the edit functionality. It actually has a comment above it saying so ("use this button to add a edit kind of action"). At line 92 the onClick function start. You just need to change the onClick function with one of those from src/views/Components/SweetAlertPage.jsx . I think it is obvious that you will need the state from src/views/Components/SweetAlertPage.jsx to add it to your component and also the function for the sweet alert you will choose to use. Also to not forget to add {this.state.alert} , i your render method. Best, Manu.
5 years ago

ruetheday6969
  • downloaded

Hmm ok, so are you suggesting that sweet alert can popup data forms and not just alerts? The sample code you provide for sweet alerts only show alerting forms, definitely fancier than the standard alert but I am looking for a way to pop up a full form for editing data from the react table element. Looking at the docs for sweet alert I didnt see how I could embed other elements into the alert..like full data forms ?
5 years ago

ctmployee
  • downloaded

Hello @ruetheday6969 after a quick search about react-bootstrap-sweetalert (the react plugin used to create sweet alerts) i've seen that they offer just one input per sweet alert. So you couldn't use it to create a whole form. You can do two things in this situation, you either open an issue here: https://github.com/djorg83/react-bootstrap-sweetalert , asking the owner of react-bootstrap-sweetalert to make a way to render multiple form inputs, or you can use a modal instead from react-bootstrap https://react-bootstrap.github.io/components/modal/ . Best, Manu.
5 years ago

ruetheday6969
  • downloaded

Ok so now back to my original question... Assuming I am going to use your modal component, whats the best way to pop this up over an existing dashboard. I understand that I can definitely just build a new dashboard and call it but do you have a way to pop a modal form up like what sweet alerts does for alerts but it would be a popup modal form or mini page/dashboard view?
5 years ago

ctmployee
  • downloaded

We do not have a modal component, if you should go by using the modal, you should know that we haven;t made any changes to react-bootstrap's modal, so in fact, you'll be using their component, not our. Also whether to create a new page or just put the code in the same page i think it is a matter of choice and you should decide which approach to use. So to answer your question, you can create your own page with the modal that will pop up (i think this is kind of a weird approach), but you can also just add the code in the same page where you want the modal to appear (and this is something that would look like the sweet alert plugin). Once again, i think you should decide what you want, and maybe read the docs of the react-bootstrap's modal (here is the link again https://react-bootstrap.github.io/components/modal/). Best, Manu.
5 years ago

kwonssy02
  • downloaded
5 years ago

I want to make an router link with parameters like ‘/dashboard/:date’. And I could add the route to /routes/dashboard.jsx file. Then I couldn’t see Header Brand name. I think makeBrand() in Header.jsx should be improved. How can I resolve this?

ctmployee
  • downloaded

Hello @kwonssy02 and thank you for your interest in using our product. The only way i can see makeBrand() not working, is if you haven't set the name property in your route. Have you set <<name: "YourName",>> inside your new route? If you have set it, than i cannot imagine why is not working. Best, Manu.
5 years ago

kwonssy02
  • downloaded
5 years ago

I think it is because the pattern ‘/dashboard/:date’ does not match with location.pathname ‘/dashboard:/:17052018’.

ctmployee
  • downloaded

Oh, yeah. Than unfortunately i think you should change the makeBrand() function to your own needs. Best, Manu.
5 years ago

kwonssy02
  • downloaded
5 years ago

Then how can I make a page with parameters? Every page with parameters would not have Header Brand. Are you planning to make it?

kwonssy02
  • downloaded

I solved this problem with npm url-pattern library. I think it would be nice if you consider this problem on next version. Thank you for quick reply
5 years ago

ctmployee
  • downloaded

@kwonssy02 i've added a note about this for the next update. Best, Manu.
5 years ago

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