Light Bootstrap Dashboard PRO

Elements description

v1.4.1 - Bootstrap 3

Short Description and Usage

Light Bootstrap Dashboard PRO is a beautiful resource built over Bootstrap to allow you to create powerful and beautiful dashboards. We have redesigned all the usual components in Bootstrap to make it look flat, minimalist and easy to use.

Using the dashboard is very simple, but it does require you to understand basic JavaScript functions. To get the desired effect you will need to integrate JS plugins that take a little bit more effort. Down below we list all the files you need to include inside the application to get going. In the elements page, you can how each element if called and used.

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-pro

├── HTML
│   ├── assets
│   │   ├── css
│   │   │   ├── bootstrap.min.css
│   │   │   ├── demo.css
│   │   │   ├── light-bootstrap-dashboard.css
│   │   │   └── pe-icon-7-stroke.css
│   │   ├── fonts
│   │   ├── img
│   │   ├── js
│   │   └── sass
│   │       ├── lbd
│   │       └── light-bootstrap-dashboard.scss
│   ├── documentation
│   └── examples
│       ├── calendar.html
│       ├── charts.html
│       ├── components
│       │   ├── buttons.html
│       │   ├── grid.html
│       │   ├── icons.html
│       │   ├── notifications.html
│       │   ├── panels.html
│       │   ├── sweet-alert.html
│       │   └── typography.html
│       ├── dashboard.html
│       ├── forms
│       │   ├── extended.html
│       │   ├── regular.html
│       │   ├── validation.html
│       │   └── wizard.html
│       ├── maps
│       │   ├── fullscreen.html
│       │   ├── google.html
│       │   └── vector.html
│       ├── navbar-fixed-example.html
│       ├── pages
│       │   ├── lock.html
│       │   ├── login.html
│       │   ├── register.html
│       │   └── user.html
│       ├── plain-page.html
│       ├── sidebar-mini-example.html
│       └── tables
│           ├── bootstrap-table.html
│           ├── datatables.net.html
│           ├── extended.html
│           └── regular.html
├── Sketch
│   ├── fonts
│   │   ├── FontAwesome.otf
│   │   ├── Pe-icon-7-stroke.eot
│   │   ├── Pe-icon-7-stroke.ttf
│   │   ├── Pe-icon-7-stroke.woff
│   │   └── fontawesome-webfont.ttf
│   └── light-bootstrap-dashboard-pro.sketch
└── CHANGELOG.md

Restyled Components

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

  • Buttons
  • Collapse
  • Dropdown
  • Images
  • Inputs
  • Menu
  • Navigation Menu
  • Notifications
  • Pagination
  • Progress Bars
  • Select
  • Tables
  • Textarea
  • Tooltips
  • 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
  • jVector Maps
  • jQuery Validations
  • Bootstrap Table
  • DataTables
  • DateTimePicker
  • Maps
  • Panels
  • Radio Buttons
  • Sliders
  • Sweet Alert
  • Switches
  • Sidebar
  • Tags
  • Wizard

License

Currently, on Creative Tim you can get the products with three types of licenses: MIT License, Personal License or Developer License. All the freebies are licensed to MIT License as default. If you are making a paid purchase, be sure to go through the table with the rights and the guidelines, so you can know what license is the best fit for you (Personal License or Developer License). View the rights table and the description for each license on our Official License Page.

Buttons Live Demo

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.

Social Buttons

An extra category of buttons that are necessary for any project is the social buttons. We have added classes that provide the default color for every social network.
To use them, you have to add to your button the general class 'btn-social' and the specific network, for example 'btn-twitter'. All styles described above can be applied to social buttons, ranging from filled to round to simple.
We used the Font Awesome social icons that you can find here.
Here is the example for all the social buttons with the filled style:

See Full Implementation 
<button class="btn btn-social btn-fill btn-twitter">

    <i class="fa fa-twitter"></i>

</button>

<button class="btn btn-social btn-fill btn-facebook">

    <i class="fa fa-facebook"> </i>

</button>

<button class="btn btn-social btn-fill btn-google">

    <i class="fa fa-google-plus"> </i>

</button>

<button class="btn btn-social btn-fill btn-linkedin">

    <i class="fa fa-linkedin"></i>

</button>

<button class="btn btn-social btn-fill btn-pinterest">

    <i class="fa fa-pinterest"></i>

</button>

<button class="btn btn-social btn-fill btn-youtube">

    <i class="fa fa-youtube-play"> </i>

</button>

<button class="btn btn-social btn-fill btn-tumblr">

    <i class="fa fa-tumblr"> </i>

</button>

<button class="btn btn-social btn-fill btn-github">

    <i class="fa fa-github"></i>

</button>

<button class="btn btn-social btn-fill btn-behance">

    <i class="fa fa-behance"></i>

</button>

<button class="btn btn-social btn-fill btn-dribbble">

    <i class="fa fa-dribbble"></i>

</button>

<button class="btn btn-social btn-fill btn-reddit">

    <i class="fa fa-reddit"></i>

</button>

<button class="btn btn-social btn-fill btn-stumbleupon">

    <i class="fa fa-stumbleupon"></i>

</button>

Checkboxes Live Demo

To use the custom checkboxes, just use the code below.

See coded example 
<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" checked="" disabled="">
	<label for="checkbox4">
		Disabled checked
	</label>
</div>

Radio Buttons Live Demo

To use the custom radio buttons, just use the code below.

See coded example 
<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="radio3" id="radio3" value="option3" disabled="">
	 	<label for="radio3">
		 	Disabled radio is off
	 	</label>
 	</div>

 	<div class="radio">
	 	<input type="radio" name="radio4" id="radio4" value="option4" checked="" disabled="">
	 	<label for="radio4">
		 	Disabled radio is on
	 	</label>
 	</div>

Switches Live Demo

If you want to use something more special than a checkbox, we recommend the switch. You can use them as plain, with text or with icons. The default version is the one with text(on and off states).
For the original documentation, please go here: Larentis Switch.


See Full Implementation 
<input type="checkbox" data-toggle="switch" checked
data-on-text="ON"
data-off-text="OFF"
/>

<input type="checkbox" data-toggle="switch"
data-on-text=""
data-off-text=""
/>

<input type="checkbox" data-toggle="switch" checked
	data-off-text="<i class='fa fa-times'></i>"
	data-on-text="<i class='fa fa-check'></i>"
/>

Inputs Live Demo

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">

    <input type="text" value="" placeholder="Input" class="form-control" />

</div>



<div class="form-group has-success">

    <input type="text" value="Success" class="form-control" />

</div>



<div class="form-group has-error has-feedback">

    <input type="text" value="Error" class="form-control" />

    <span class="fa fa-times form-control-feedback"></span>

</div>



<div class="input-group">

    <input type="text" value="Group Addon" class="form-control">

    <span class="input-group-addon"><i class="fa fa-group"></i></span>

</div>

Customizable Select Live Demo

We added new style classes for the dropdown; to use them you have to add the class "dropdown-{color}" with the color you want. There are 2 ways to use them: as normal select, in which case you need to specify the style as "form-control", or as button, for which you have to specify the style as "btn-{type}". You can also have multiple select by using the "multiple" attribute on the select tag. Like we added in the coded example.

See full implementation 
<!-- simple select -->
<select name="cities" class="selectpicker" data-title="Single Select" data-style="btn-default btn-block" data-menu-style="dropdown-blue">
    <option value="id">Bahasa Indonesia</option>
    <option value="ms">Bahasa Melayu</option>
...
</select>

<!-- multiple select -->
<select multiple data-title="Multiple Select" name="currency" class="selectpicker" data-style="btn-info btn-fill btn-block" data-menu-style="dropdown-blue">
    <option value="ARS">ARS</option>
    <option value="AUD">AUD</option>
...
</select>

<!-- Bootstrap Select Picker -->
if($(".selectpicker").length != 0){
    $(".selectpicker").selectpicker();
}

Tags Live Demo

If you want to use tags, we now offer you 3 possibilities: simple tags, colored tags that you can use by adding the necessary color class and filled tags, resulted by using the "tag-fill" class.

See full implementation 
<input name="tagsinput" class="tagsinput tag-azure" value="Minimal, Nice, Good"/>

<input name="tagsinput" class="tagsinput tag-azure tag-fill" value="Minimal, Nice, Good"/>

Textarea Live Demo

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>