Short Description and Usage
Light Bootstrap Dashboard is an admin dashboard template designed to be beautiful and simple. It is built on top of Bootstrap 3 and it is fully responsive. It comes with a big collections 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 contains multiple handpicked and optimised 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 customisation of this product.It comes with 6 filter colors for the sidebar (
purple) and an option to have a background image.
The Light Bootstrap Dashboard is built on top of Bootstrap 3, so you can safely use it on your existing or new Bootstrap project. No line of code from Bootstrap 3 was changed, so you don't have to worry about undesired effects in your work.
We provide all the necessary CSS resources. So, to immediately change or get started with our design, include the "css/light-bootstrap-dashboard.css" in your HTML template. Your project will get the new look.
Once you have downloaded the archive and opened it, you will find the following structure:
Let's take it one by one:
Light Bootstrap Dashboard
├── assets │ ├── css │ ├── fonts │ ├── img │ ├── js │ └── sass │ ├── lbd │ └── light-bootstrap-dashboard.scss ├── dashboard.html ├── CHANGELOG.md ├── documentation │ ├── css │ └── elements.html ├── icons.html ├── maps.html ├── notifications.html ├── table.html ├── template.html ├── typography.html ├── upgrade.html └── user.html
Here is the list of Bootstrap 3 components that we restyled for the Light Bootstrap Dashboard:
- Navigation Menu
Besides giving the existing Bootstrap elements a new look, we added new ones, so that the interface and consistent and homogenous. We also imported more plugins to use depending on your needs.
Going through them, we added:
- Google Maps
- Radio Buttons
For more details regarding the components, go to our elements page.
Copyright (c) 2017 Creative Tim (http://creative-tim.com/) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
To use the custom checkboxes, just take the code below and use it.
<div class="checkbox"> <input id="checkbox1" type="checkbox"> <label for="checkbox1">Unchecked</label> </div> <div class="checkbox"> <input id="checkbox2" type="checkbox" checked> <label for="checkbox2">Checked</label> </div> <div class="checkbox"> <input id="checkbox3" type="checkbox" disabled> <label for="checkbox3">Disabled Unchecked</label> </div> <div class="checkbox"> <input id="checkbox4" type="checkbox" disabled checked> <label for="checkbox4">Disabled Checked</label> </div>
To use the custom radio buttons, just take the code below and use it.
<div class="radio"> <input type="radio" name="radio1" id="radio1" value="option1"> <label for="radio1"> Radio is off </label> </div> <div class="radio"> <input type="radio" name="radio1" id="radio2" value="option2" checked> <label for="radio2"> Radio is on </label> </div> <div class="radio"> <input type="radio" name="radio2" id="radio3" value="option3" disabled> <label for="radio3"> Disabled radio is off </label> </div> <div class="radio"> <input type="radio" name="radio2" id="radio4" value="option4" disabled checked> <label for="radio4"> Disabled radio is on </label> </div>
We are very proud to present the dropdown, we added a subtle animation for this classic widget.
Here are an examples and the code:
<div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
We restyled the Bootstrap input to give it a more flat, minimal look. You can use the classic look, different colors and states or input groups.
<div class="form-group"> <label>Company (disabled)</label> <input type="text" class="form-control" disabled placeholder="Company" value="Creative Code Inc."> </div> <div class="form-group"> <label>Username</label> <input type="text" class="form-control" placeholder="Username" value="michael23"> </div> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" placeholder="Email"> </div>
We added custom style for the textarea, so it looks similar to all other inputs.
<textarea class="form-control" placeholder="Here can be your nice text" rows="3"></textarea>