Light Bootstrap Dashboard

Elements description

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 (black, azure,green,orange,red,purple) and an option to have a background image.

Getting Started

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.

To jump start your project, you can use our start-up template where all the files are already included and ready to use. If you do however, want to start from scratch, you can see the file structure below. The core JavaScript is contained in "js/light-bootstrap-dashboard.js". Some functions are called from "js/demo.js" because they are presented only for demo purpose, you can check there how they are working and duplicate their effect on your projct. For the other files, you should add them if you use the specific element inside your page.

File Structure

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

Restyled Components

Here is the list of Bootstrap 3 components that we restyled for the Light Bootstrap Dashboard:

  • Buttons
  • Dropdown
  • Images
  • Inputs
  • Menu
  • Navigation Menu
  • Notifications
  • Tables
  • Textarea
  • Typography

New Components

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:

  • Charts
  • Checkboxes
  • Footers
  • Google Maps
  • Maps
  • Radio Buttons
  • Sidebar

For more details regarding the components, go to our elements page.

MIT License

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.

Buttons

Colors

We worked over the original Bootstrap classes, choosing a different, slightly intenser color pallete:


See Full Implementation 
<button class="btn btn-default">Default</button>

<button class="btn btn-primary">Primary</button>

<button class="btn btn-info">Info</button>

<button class="btn btn-success">Success</button>

<button class="btn btn-warning">Warning</button>

<button class="btn btn-danger">Danger</button>

Sizes

Buttons come in all needed sizes:

See Full Implementation 
<button class="btn btn-primary btn-lg">Large</button>

<button class="btn btn-primary">Normal</button>

<button class="btn btn-primary btn-sm">Small</button>

<button class="btn btn-primary btn-xs">Extra Small</button>

Styles

We added extra classes that can help you better customise the look. You can use regular buttons, filled buttons, rounded corners buttons or plain link buttons. Let's see some examples:

See Full Implementation 
<button class="btn btn-primary">Default</button>

<button class="btn btn-primary btn-fill">Filled</button>

<button class="btn btn-primary btn-round">Round</button>

<button class="btn btn-primary btn-simple">Simple</button>

Button groups, toolbars, and disabled state all work like they are supposed to.

Checkboxes

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>

Radio Buttons

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>

Inputs

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.

See full implementation 
<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>

Textarea

We added custom style for the textarea, so it looks similar to all other inputs.

See full implementation 
<textarea class="form-control" placeholder="Here can be your nice text" rows="3"></textarea>