Light Bootstrap Dashboard React: Free Bootstrap Admin Template @ Creative Tim

	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

What is in Demo?

What is in PRO Version?

Elements

Plugins

Examples Pages

Full Coded

Documentation

SASS Files

Designer Files

Premium Support

We are here to help you!

68 Web Developers commented on this product

Github Docs Knowledge Center

Custom Development Discord Server

anoirtayeb155

downloaded

5 years ago

hey how can i open the first page ?

ctmployee

downloaded

Hello @anoirtayeb155 and thank you for your interest in using our product. Please read our live docs: https://demos.creative-tim.com/light-bootstrap-dashboard-react/#/documentation/getting-started . Best, Manu.

5 years ago

joshinb87

downloaded

5 years ago

Hi, Thanks for the awesome freebies, however i can't find the implemented code of sidebar color and background image change, i would also like to implement that in my personal project, can you send me that version? Thanks

ctmployee

downloaded

Hello @joshinb87 and thank you for your interest in using our product. That is only used for demo purposes. If you want it, you need to implement it by yourself. It is not that hard to make it, if you know a bit of react it should take you a max of 30 minutes to implement it. Best, Manu.

5 years ago

joshinb87

downloaded

5 years ago

i mean sidebar customizer which is in your live demo, but not in the downloaded package.

ctmployee

downloaded

Hello @joshinb87 . Please read the above comment. Best, Manu.

5 years ago

sriatsav 5 years ago

Can we integrate redux to this ?

ctmployee

downloaded

Hello @sriatsav . And thank you for your interest in using our product. We haven't used Redux in any of our products and can't really answer your question. But I am going to tell you what we've told to a lot of our users that wanted something in our products that we haven't used. Since this is a free product, you can download it and see if it suits your needs. I am sorry if this was not the answer you were looking for. Best, Manu.

5 years ago

sriatsav 5 years ago

If so, is there any guide to do so.

ctmployee

downloaded

Hello again @sriatsav . At the moment we do not have a tutorial or a guide on how to add Redux on our products. Best, Manu.

5 years ago

pccgoico

downloaded

5 years ago

Failed to compile when npm start ./src/index.js Module not found: Can't resolve 'routes/index.jsx' in '~/light-bootstrap-dashboard-react-html-v1.2.0/src' why is that ?? regards

ctmployee

downloaded

Hello there @pccgoico . Thank you for your interest in working with our product. Verify if you have a .env file inside your root directory, if you do not have, create it and add NODE_ENV=./src inside it. If this does not do the trick, than create in terminal run <<npm install -g cross-env>> and after this, change the start script by adding NODE_ENV at it's beginning. Hope this info helps you. Best, Manu.

5 years ago

pccgoico

downloaded

5 years ago

Thank you very much @ctmployee :-)

tcyoung14

downloaded

5 years ago

Has anyone incorporated this dashboard into a .NET Core project?

feritarslan

downloaded

5 years ago

How can I implement private routes on this project?

ctmployee

downloaded

Hello there @feritarslan . I haven't worked with private routes, and to be honest, I do not know what they are. If you are having trouble understanding our RoutingSystem, you can go ahead and delete it, and create your own static routes, or your own Routing System. Best, Manu.

5 years ago

feritarslan

downloaded

I did handle it. I can add this implementation to free version on GitHub.

5 years ago

ctmployee

downloaded

Hello again @feritarslan . Go ahead and open a PR. Best, Manu.

5 years ago

shailendra

downloaded

5 years ago

Hello, How to set pagination view when my api response in form of key and value for example - { "data": [{ "club_id": 1, "club_name": "myclub", "user_id": 24, "address": " Block-B, Radha Krishna Complex", "number": "123", "postal_code": "369", "club_long": "75.8849418", }] "rowsPerPage": 15 } how to i implemented it already done with the form of array in array for example - const dataTable = { headerRow: ['Name', 'Position', 'Office', 'Age', 'Date', 'Actions' ], footerRow: ['Name', 'Position', 'Office', 'Age', 'Date', 'Actions' ], dataRows: [ ['Shailendra Sen', 'Andrew Mike', 'Develop', '2013', '99,225', '1234'], ['Angelica Ramos', 'John Doe', 'Design', '2012', '89,241', '12345'], ] };

ctmployee

downloaded

Hello there @shailendra and thank you for your interest in working with our products. Unfortunately, this product does not have a Pagination component. Best, Manu.

5 years ago

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

[2.0.0] 2021-01-21

IMPORTANT

We have updated this product from Bootstrap 3 to Bootstrap 4, so in essence, this is a new product

For this, we have followed the guidelines from here and here

We also did not add Bootstrap variables as part of our styles (we will do so in one of our next updates, probably in version 3.0.0 when we'll add Bootstrap 5) ### Bug fixing

Renamed all files to .js, instead of .jsx

Refactor all files from class components to functional ones, so now, you can use React Hooks

https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/62

https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/58

https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/52

https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/50 ### Major style changes

Since the update from Bootstrap 3 to Bootstrap 4, all styles have been changed ### Deleted components

src/components/Card/Card.jsx (we'll use the simple React Bootstrap tags instead)

src/components/CustomButton/CustomButton.jsx (we'll use the simple React Bootstrap tags instead)

src/components/CustomCheckbox/CustomCheckbox.jsx (we'll use the simple React Bootstrap tags instead)

src/components/CustomRadio/CustomRadio.jsx (we'll use the simple React Bootstrap tags instead)

src/components/FormInputs/FormInputs.jsx (we'll use the simple React Bootstrap tags instead)

src/components/StatsCard/StatsCard.jsx (we'll use the simple React Bootstrap tags instead)

src/components/Tasks/Tasks.jsx (we'll use the simple React Bootstrap tags instead)

src/components/UserCard/UserCard.jsx (we'll use the simple React Bootstrap tags instead) ### Added components ### Deleted dependencies

react-notification-system (we'll use react-notification-alert from now on)

@types/googlemaps

@types/markerclustererplus

@types/react

react-google-maps (we'll use simple Google Maps API with Vanilla JS)

react-toggle (we'll use the simple React-Bootstrap Form.Check as a switch instead) ### Added dependencies

[email protected] (instead of the react-notification-system)

[email protected] (as part of the react-notification-alert)

[email protected] (since Bootstrap requires it)

@fortawesome/[email protected] (For easier update of the package - instead of a link inside public/index.html)

[email protected] (For Creative Tim licenses)

[email protected] (For Creative Tim licenses) ### Updated dependencies


bootstrap 3.3.7 → 4.6.0
node-sass 4.12.0 → 4.14.1
react 16.8.6 → 17.0.1
react-bootstrap 0.32.4 → 1.4.3
react-chartist 0.13.3 → 0.14.3
react-dom 16.8.6 → 17.0.1
react-router 5.0.0 → 5.2.0
react-router-dom 5.0.0 → 5.2.0
react-scripts 3.0.0 → 4.0.1
typescript 3.4.3 → 4.1.3

### Warning The TypeScript and jQuery dependencies are installed only to stop console warnings on install. They are not actually used in our product. So the product is not based on TypeScript or jQuery! The following warnings will appear when running the installation command, but they do not affect the UI or the functionality of the product (they will be solved in our next update):


npm WARN [email protected] requires a peer of react@^0.14.9 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.

If they will persist in our 2.4.* version, we will drop their usages and replace them with other plugins. In development mode, some of the above plugins will throw a warning because they still use React v16 syntax. If the error will persist in our 2.4.* version, we will drop their usage and replace them with other plugins. ### Upgrade details

Updated all packages from package.json using npm-upgrade, link here: https://www.npmjs.com/package/npm-upgrade

Renamed all ControlLabel components to FormLabel (this refers to the react-bootstrap components)

Renamed all Grid components to Container (this refers to the react-bootstrap components)

Rename all HelpBlock components to FormText

Rename all MenuItem components to Dropdown.Item and NavDropdown.Item

Rename all Panel components to Card

Deleted variables folder

Change the usage of React Big Calendar to the new API, so instead of


import BigCalendar from "react-big-calendar";

And


const localizer = BigCalendar.momentLocalizer(moment);

We will have:


import { Calendar as BigCalendar, momentLocalizer } from "react-big-calendar";

And


const localizer = momentLocalizer(moment);

Change Panels with new react-bootstrap components

For Col componets, replaced size={number1} sizeOffest={number2} with size={{span: number1, offset: number2}} where size can be xs, sm, md, lg

Changed bsStyle to variant

Changed bsSize to size

Replace <Navbar.Header> with <div className=“navbar-header”>

Replace <Navbar.Form> with <div className="navbar-search-form navbar-form navbar-left">

Replace <FormGroup> with <Form.Group>

Replace <InputGroup.Addon> with <InputGroup.Prepend><InputGroup.Text> and <InputGroup.Append><InputGroup.Text>

All required images have a default prop at the end now, example: const us_flag = require("../assets/img/flags/US.png"); was changed to const us_flag = require("../assets/img/flags/US.png").default;

Rename all .jsx files to .js

Added Row and Col inside StatsCard

Delete eventKey from NavDropdown components

Deleted noCaret from NavDropdown components

Replace Navbar fluid with Navbar → Container fluid

Add fontawesome as dependencie instead of font link insde public/index.html, it is now imported insde src/index.js

In addition to these changes, we’ve chaned the structure of the pages and components as well to match those from the HTML version of the product: https://www.creative-tim.com/product/light-bootstrap-dashboard

[1.3.0] 2019-05-03

Bug fixing

Renamed src/layouts/Dashboard/Dashboard.jsx to src/layouts/Admin.jsx

Renamed src/views/Dashboard/Dashboard.jsx to src/views/Dashboard.jsx

Renamed src/views/Dashboard/Dashboard.jsx to src/views/Icons.jsx

Renamed src/views/Dashboard/Dashboard.jsx to src/views/Maps.jsx

Renamed src/views/Dashboard/Dashboard.jsx to src/views/Notifications.jsx

Renamed src/views/Dashboard/Dashboard.jsx to src/views/TableList.jsx

Renamed src/views/Dashboard/Dashboard.jsx to src/views/Typography.jsx

Renamed src/views/Dashboard/Dashboard.jsx to src/views/Upgrade.jsx

Renamed src/views/Dashboard/Dashboard.jsx to src/views/UserProfile.jsx

Renamed src/components/Header to src/components/Navbars

Renamed src/components/Navbars/Header.jsx to src/components/Navbars/AdminNavbar.jsx

Renamed src/components/Navbars/HeaderLinks.jsx to src/components/Navbars/AdminNavbarLinks.jsx

Changes caused by running the prettier command for .jsx, .js, .html and .css files

Changed our buggy routing system, now it should work flawlessly, for more info, please refer to our live docs here

Solved

https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/48
https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/47
https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/34
https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/30
https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/19
https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/17
https://github.com/creativetimofficial/light-bootstrap-dashboard-react/issues/15

Removed .env file and replaced it with jsconfig.json

Small bug fixes ### Removed dependencies/components

Deleted src/routes/* folder

node-sass-chokidar

npm-run-all ### Added dependencies/components

Added src/routes.js file (instead of the three files from src/routes/*)

@types/[email protected] (to stop install warnings)

[email protected] (to stop install warnings)

[email protected] (react-router-dom auto-installs this package, but it is better to have them both inside package.json)

[email protected] ### Update dependencies

node-sass 4.6.1 → 4.12.0

react 16.2.0 → 16.8.6

react-bootstrap 0.32.1 → 0.32.4

react-chartist 0.13.1 → 0.13.3

react-dom 16.2.0 → 16.8.6

react-router-dom 4.2.2 → 5.0.0

react-scripts 1.1.1 → 3.0.0

[1.2.0] 2018-04-12

Bug fixing

Added fluid prop on Grid component in Footer

Moved all the contents of elements folder to components folder and delete it

Renamed containers folder to layouts

Renamed App/App.jsx to Dashboard/Dashboard.jsx

Renamed src/routes/app.jsx to src/routes/dashboard.jsx

Renamed appRoutes to dashboardRoutes

Added src/routes/index.jsx and made the routes in src/index.js dynamically based on indexRoutes from src/routes/index.jsx (users can now make new layouts and routes for them easier) ### Removed dependencies/components

[email protected]

[email protected] ### Added dependencies/components

[email protected]

[email protected] (insted of [email protected])

[email protected] (and deleted src/assets/bootstrap.min.css?v=3.3.5) ### Update dependencies

[email protected] to [email protected]

[1.1.0] 2017-10-30

Bug fixing

Changed property of isChecked in CustomCheckbox

Removed hover state for checkboxes and radios

Moved NotificationSystem outside of .main-panel (for responsive issues)

All div's with Bootstrap classes (.container,.container-fluid,.row,.col-*) were changed in React-Bootstrap components

Changed Notifications Places buttons from buttons with className to our own button component CustomButton

Added property round in CustomButton (for the button class .btn-round)

Added dynamic routes

Light Bootstrap Dashboard React

Light Bootstrap Dashboard React

Free Bootstrap React Admin Template

Free Bootstrap React Admin Template

Product description

Product certified by: Creative Tim

89,041

2.0.1

1 year ago

6 years ago

30

3

7

Upgrade to PRO Version

We are here to help you!

68 Web Developers commented on this product

anoirtayeb155 downloaded 5 years ago

ctmployee downloaded

5 years ago

joshinb87 downloaded 5 years ago

ctmployee downloaded

5 years ago

joshinb87 downloaded 5 years ago

ctmployee downloaded

5 years ago

sriatsav 5 years ago

ctmployee downloaded

5 years ago

sriatsav 5 years ago

ctmployee downloaded

5 years ago

pccgoico downloaded 5 years ago

ctmployee downloaded

5 years ago

pccgoico downloaded 5 years ago

tcyoung14 downloaded 5 years ago

feritarslan downloaded 5 years ago

ctmployee downloaded

5 years ago

feritarslan downloaded

5 years ago

ctmployee downloaded

5 years ago

shailendra downloaded 5 years ago

ctmployee downloaded

5 years ago

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

Sharing is caring!

2,481,569 accounts

4,405,161 downloads

Company

Help and Support

Legal

Resources

Login with

anoirtayeb155

downloaded

5 years ago

ctmployee

downloaded

joshinb87

downloaded

5 years ago

ctmployee

downloaded

joshinb87

downloaded

5 years ago

ctmployee

downloaded

ctmployee

downloaded

ctmployee

downloaded

pccgoico

downloaded

5 years ago

ctmployee

downloaded

pccgoico

downloaded

5 years ago

tcyoung14

downloaded

5 years ago

feritarslan

downloaded

5 years ago

ctmployee

downloaded

feritarslan

downloaded

ctmployee

downloaded

shailendra

downloaded

5 years ago

ctmployee

downloaded