Light Bootstrap Dashboard PRO React

Help us be cool on Github! 😏 Take a look at our Material Dashboard and if you love it as much as we do, give us a star ⭐️ 🐱

Light Bootstrap Dashboard PRO React

Premium Bootstrap React Admin Template
· 4.90/5 (16 Reviews)

License

404 Downloads
40 Comments
Premium Support
Lifetime Updates
Release: 7 months ago
Update: 28 days ago

60 Handcrafted Components

13 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 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?
  • Components · 30
  • Plugins · 3
  • Examples Pages · 7
  • -
  • -
  • -
What is in PRO Version?
  • Components · 60
  • Plugins · 13
  • Example Pages · 24
  • + Documentation
  • + SASS Files
  • + Sketch Files
Get Free Demo

We are here to help you!

40 Web Developers commented on this product

Report issue

infot6d
  • downloaded
1 month 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.

einazare
  • owner

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.
1 month ago

ruetheday6969
  • downloaded
1 month 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 ?

einazare
  • owner

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.
1 month 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?
1 month ago

einazare
  • owner

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.
1 month ago

paul.vandyk
  • downloaded
1 month 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.

einazare
  • owner

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.
1 month ago

ruetheday6969
  • downloaded
1 month 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?

einazare
  • owner

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.
1 month ago

ruetheday6969
  • downloaded
1 month 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!

einazare
  • owner

Hello again @ruetheday6969 , i am really sorry, but i do not understand this question. Can you please be more explicit? Thank you, Manu.
1 month 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?
1 month ago

einazare
  • owner

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.
1 month ago

ruetheday6969
  • downloaded
1 month 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 ?

einazare
  • owner

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.
1 month ago

ruetheday6969
  • downloaded
1 month 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!

einazare
  • owner

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.
1 month 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 ?
1 month ago

einazare
  • owner

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.
1 month 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?
1 month ago

einazare
  • owner

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.
1 month ago

kwonssy02
  • downloaded
1 month 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?

einazare
  • owner

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.
1 month ago

kwonssy02
  • downloaded
1 month ago

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

einazare
  • owner

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

kwonssy02
  • downloaded
1 month 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
1 month ago

einazare
  • owner

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

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

Why our customers appreciate us

Design Quality

Design Quality

beautiful

Customizability

It was nice to see the best template in the world. but the problem is there are no supports for Arabic and RLT supports. But it nice to see these kind of products.