Light Bootstrap Dashboard PRO

Elements description V2.0.1

Bootstrap 4

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 4, so you can safely use it on your existing or new Bootstrap project. No line of code from Bootstrap 4 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
├── CHANGELOG.md
├── README.md
├── assets
│   ├── css
│   │   ├── bootstrap.min.css
│   │   ├── demo.css
│   │   ├── documentation.css
│   │   └──  light-bootstrap-dashboard.css
│   ├── fonts
│   ├── img
│   ├── js
│   │   ├── core
│   │   ├── demo.js
│   │   ├── light-bootstrap-dashboard.js
│   │   └── plugins
│   └── main.css
├── documentation
│   ├── template.html
│   └── tutorial-components.html
└── 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
    ├── table.html
    ├── tables
    │   ├── bootstrap-table.html
    │   ├── datatables.net.html
    │   ├── extended.html
    │   └── regular.html
    └── upgrade.html

Restyled Components

Here is the list of Bootstrap 4 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: 

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

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

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

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

<div class="form-check">
	<label class="form-check-label">
	<input class="form-check-input" type="checkbox" value="">
	<span class="form-check-sign"></span>
		Unchecked
	</label>
</div>
<div class="form-check">
	<label class="form-check-label">
	<input class="form-check-input" type="checkbox" value="" checked>
	<span class="form-check-sign"></span>
		Checked
	</label>
</div>
<div class="form-check disabled">
	<label class="form-check-label">
	<input class="form-check-input" type="checkbox" value="" disabled>
	<span class="form-check-sign"></span>
		Disabled Unchecked
	</label>
</div>
<div class="form-check disabled">
	<label class="form-check-label">
	<input class="form-check-input" type="checkbox" value="" disabled checked>
	<span class="form-check-sign"></span>
		Disabled Checked
	</label>
</div>

Radio Buttons Live Demo

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

<div class="form-check form-check-radio">
    <label class="form-check-label">
	  <input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadios1" value="option1">
         <span class="form-check-sign"></span>
	 	<label for="radio1">
		 	Radio is off
	</label>
</div>

<div class="form-check form-check-radio">
    <label class="form-check-label">
	  <input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadios1" value="option1">
         <span class="form-check-sign"></span>
	 	<label for="radio1">
		 	Radio is on
	</label>
</div>

<div class="form-check form-check-radio disabled">
    <label class="form-check-label">
	  <input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadios1" value="option1">
         <span class="form-check-sign"></span>
	 	<label for="radio1">
		 	Radio disabled is off
	</label>
</div>

<div class="form-check form-check-radio disabled">
    <label class="form-check-label">
	  <input class="form-check-input" type="radio" name="exampleRadio" id="exampleRadios1" value="option1">
         <span class="form-check-sign"></span>
	 	<label for="radio1">
		 	Radio disabled 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. 


<input type="checkbox" checked="" data-toggle="switch" data-on-color="info" data-off-color="info"/>
<span class="toggle"></span>

<input type="checkbox" data-toggle="switch" data-on-color="info" data-off-color="info"  data-on-text="" data-off-text="">
<span class="toggle"></span>

<input type="checkbox" checked="" data-toggle="switch" data-on-color="info" data-off-color="info"  data-on-text="" data-off-text="">
<span class="toggle"></span>

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. 

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

<!-- 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.

Regular: Filled: 
Regular:<input type="text" data-role="tagsinput" value="Minimal, Light, New, Friends"/>

Filled: <input type="text" data-role="tagsinput" value="Design & UI, Inspiration, Business, Lifestyle"/>

Textarea Live Demo

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

<textarea id="textarea" placeholder="Here can be your nice text" rows="5"></textarea>

Tables v1.8.1 Live Demo

All Boostrap classes for tables are supported and improved. Besides the simple and striped tables, we added tables that have actions and table with switches. We have also created the Big Boy table, that can be used for content management systems or in the checkout process of an ecommerce. It offers extended functionality, like adding pictures, descriptions and actions.
You can see coded examples below:

Simple Table with Actions

# Name Job Position Since Salary Actions
1 Andrew Mike Develop 2013 € 99,225
2 John Doe Design 2012 € 89,241
3 Alex Mike Design 2010 € 92,144
4 Mike Monday Marketing 2013 € 49,990
5 Paul Dickens Communication 2014 € 69,201 
<div class="table-responsive">
<table class="table">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th>Name</th>
            <th>Job Position</th>
            <th>Since</th>
            <th class="text-right">Salary</th>
            <th class="text-right">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">1</td>
            <td>Andrew Mike</td>
            <td>Develop</td>
            <td>2013</td>
            <td class="text-right">&euro; 99,225</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-link btn-sm">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-link btn-sm">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">2</td>
            <td>John Doe</td>
            <td>Design</td>
            <td>2012</td>
            <td class="text-right">&euro; 89,241</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-link btn-sm">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-link btn-sm">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">3</td>
            <td>Alex Mike</td>
            <td>Design</td>
            <td>2010</td>
            <td class="text-right">&euro; 92,144</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-link btn-sm">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-link btn-sm">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">4</td>
            <td>Mike Monday</td>
            <td>Marketing</td>
            <td>2013</td>
            <td class="text-right">&euro; 49,990</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-link btn-sm">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-link btn-sm">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">5</td>
            <td>Paul Dickens</td>
            <td>Communication</td>
            <td>2014</td>
            <td class="text-right">&euro; 69,201</td>
            <td class="td-actions text-right">
                <button type="button" rel="tooltip" title="View Profile" class="btn btn-info btn-link btn-sm">
                    <i class="fa fa-user"></i>
                </button>
                <button type="button" rel="tooltip" title="Edit Profile" class="btn btn-success btn-link btn-sm">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-link btn-sm">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
    </tbody>
</table>
</div>

Striped Table with Switches

# Name Job Position Salary Active
1 Andrew Mike Develop € 99,225
2 John Doe Design € 89,241
3 Alex Mike Design € 92,144
4 Mike Monday Marketing € 49,990 
<table class="table table-striped">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th>Name</th>
            <th>Job Position</th>
            <th class="text-right">Salary</th>
            <th class="text-right">Active</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">1</td>
            <td>Andrew Mike</td>
            <td>Develop</td>
            <td class="text-right">&euro; 99,225</td>
             <td class="text-right">
                 <input type="checkbox" checked="" data-toggle="switch" data-on-color="info" data-off-color="info"  data-on-text="" data-off-text="">
                 <span class="toggle"></span>
            </td>
        </tr>
        <tr>

            <td class="text-center">2</td>
            <td>John Doe</td>
            <td>Design</td>
            <td class="text-right">&euro; 89,241</td>
             <td class="text-right">
                 <input type="checkbox" data-toggle="switch" data-on-color="info" data-off-color="info"  data-on-text="" data-off-text="">
                 <span class="toggle"></span>
            </td>
        </tr>
        <tr>
            <td class="text-center">3</td>
            <td>Alex Mike</td>
            <td>Design</td>
            <td class="text-right">&euro; 92,144</td>
             <td class="text-right">
                 <input type="checkbox" checked="" data-toggle="switch" data-on-color="info" data-off-color="info"  data-on-text="" data-off-text="">
                 <span class="toggle"></span>
            </td>
        </tr>
        <tr>
            <td class="text-center">4</td>
            <td>Mike Monday</td>
            <td>Marketing</td>
            <td class="text-right">&euro; 49,990</td>
             <td class="text-right">
                 <input type="checkbox" data-toggle="switch" data-on-color="info" data-off-color="info"  data-on-text="" data-off-text="">
                 <span class="toggle"></span>
            </td>
        </tr>
    </tbody>
</table>

Big Boy Table

Thumb Blog Title Description Date Views
...
10 Things that all designers do Most beautiful agenda for the office, really nice paper and black cover. Most beautiful agenda for the office. 30/08/2016 1,225 
<table class="table table-bigboy">
    <thead>
        <tr>
            <th class="text-center">Thumb</th>
            <th >Blog Title</th>
            <th class="th-description">Description</th>
            <th class="text-right">Date</th>
            <th class="text-right">Views</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="img-container">
                    <img src="../../assets/img/blog-1.jpg" alt="...">
                </div>
            </td>
            <td class="td-name">
                10 Things that all designers do
            </td>
            <td>
                Most beautiful agenda for the office, really nice paper and black cover. Most beautiful agenda for the office.
            </td>
            <td class="td-number">30/08/2016</td>
            <td class="td-number">
               1,225
            </td>
            <td class="td-actions">
                <button type="button" rel="tooltip" data-placement="left" title="View Post" class="btn btn-info btn-link btn-icon">
                    <i class="fa fa-image"></i>
                </button>
                <button type="button" rel="tooltip" data-placement="left" title="Edit Post" class="btn btn-success btn-link btn-icon">
                    <i class="fa fa-edit"></i>
                </button>
                <button type="button" rel="tooltip" data-placement="left" title="Remove Post" class="btn btn-danger btn-link btn-icon ">
                    <i class="fa fa-times"></i>
                </button>
            </td>
        </tr>
    </tbody>
</table>

Collapsible Groups Live Demo

The Light Bootstrap Dashboard PRO has new classes for collapsable groups which offer a nice sneak peak into the content of the body of the group.
If you want to stick with the old classes, they remain compatible. If you want to see the new ones, you will have to add data-toggle="collapse-hover" instead of "collapse".

Here is an example of both the groups. The first two are done using the preview on hover and the third one is classical.

Collapse item 1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapse item 2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapse item 3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<div class="accordions" id="accordion">
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <a data-target="#collapseOne" href="#" data-toggle="collapse">
                    Collapse item 1
                    <b class="caret"></b>
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="card-collapse collapse">
            <div class="card-body">
                Anim pariatur cliche ...
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <a data-target="#collapseTwo" href="#" data-toggle="collapse">
                    Collapse item 2
                    <b class="caret"></b>
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="card-collapse collapse">
            <div class="card-body">
                Anim pariatur ....
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <a data-target="#collapseThree" href="#" data-toggle="collapse">
                    Collapse item 3
                    <b class="caret"></b>
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="card-collapse collapse">
            <div class="card-body">
                Anim pariatur ...
            </div>
        </div>
    </div>
</div>

Notifications v3.1.5 Live Demo

The new Light Bootstrap Dashboard notification are looking fresh and clean. They go great with the navbar. They come with 4 classes, each for a different color: '.alert-info', '.alert-success', '.alert-warning', 'alert-danger'.

If you want to use add special animations for them, we integrated a third party plugin called Bootstrap Notify. To see the original repository for it, check it out here. Out friend Robert McIntosh did a wonderful job. If you want to see a coded example, you can see it below. 

<!-- button to trigger the action -->
<button class="btn btn-default" onclick="showNotification('top','right')">Top Right Notification</button>

<!-- javascript -->
function showNotification(from, align){
	color = Math.floor((Math.random() * 4) + 1);

	$.notify({
    	icon: "pe-7s-gift",
    	message: "Welcome to <b>Light Bootstrap Dashboard</b> - a beautiful freebie for every web developer."

    },{
        type: type[color],
        timer: 4000,
        placement: {
            from: from,
            align: align
        }
    });
}

Bootstrap Table Live Demo

To offer you the possibility to better work with tables, we have integrated a third party for datatables. We have changed the design for the inputs, buttons, typography, pagination and dropdown, so it can look consistent with the rest of the dashboard.

It contains methods for sorting columns, searching, paginations, ajax calls, actions on rows and many other functions. For detailed description regarding usage, pleasee see the original documentation from our friend Zhixin Wen.

To get things going, you can start with the basic coded example below.

ID Name Salary Country City Actions
1 Dakota Rice $36,738 Niger Oud-Turnhout
2 Minerva Hooper $23,789 Curaçao Sinaai-Waas 
<!-- the code for the display of the table -->

<div class="toolbar">
    <!--   Here you can write extra buttons/actions for the toolbar  -->
</div>

<table id="bootstrap-table" class="table">
    <thead>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id" class="text-center">ID</th>
    	<th data-field="name" data-sortable="true">Name</th>
    	<th data-field="salary" data-sortable="true">Salary</th>
    	<th data-field="country" data-sortable="true">Country</th>
    	<th data-field="city">City</th>
    	<th data-field="actions" class="td-actions text-right" data-events="operateEvents" data-formatter="operateFormatter">Actions</th>
    </thead>
    <tbody>
        <tr>
            <td></td>
        	<td>1</td>
        	<td>Dakota Rice</td>
        	<td>$36,738</td>
        	<td>Niger</td>
        	<td>Oud-Turnhout</td>
        	<td></td>
        </tr>
        <tr>
            <td></td>
        	<td>2</td>
        	<td>Minerva Hooper</td>
        	<td>$23,789</td>
        	<td>Curaçao</td>
        	<td>Sinaai-Waas</td>
        	<td></td>
        </tr>
    </tbody>
</table>

<!-- the javascript for the datatables -->
<script type="text/javascript">
    var $table = $('#bootstrap-table');

    $().ready(function(){
        $table.bootstrapTable({
            toolbar: ".toolbar",
            clickToSelect: true,
            showRefresh: true,
            search: true,
            showToggle: true,
            showColumns: true,
            pagination: true,
            searchAlign: 'left',
            pageSize: 8,
            clickToSelect: false,
            pageList: [8,10,25,50,100],

            formatShowingRows: function(pageFrom, pageTo, totalRows){
                //do nothing here, we don't want to show the text "showing x of y from..."
            },
            formatRecordsPerPage: function(pageNumber){
                return pageNumber + " rows visible";
            },
            icons: {
                refresh: 'fa fa-refresh',
                toggle: 'fa fa-th-list',
                columns: 'fa fa-columns',
                detailOpen: 'fa fa-plus-circle',
                detailClose: 'fa fa-minus-circle'
            }
        });

        //activate the tooltips after the data table is initialized
        $('[rel="tooltip"]').tooltip();

        $(window).resize(function () {
            $table.bootstrapTable('resetView');
        });

        window.operateEvents = {
            'click .view': function (e, value, row, index) {
                info = JSON.stringify(row);

                swal('You click view icon, row: ', info);
                console.log(info);
            },
            'click .edit': function (e, value, row, index) {
                info = JSON.stringify(row);

                swal('You click edit icon, row: ', info);
                console.log(info);
            },
            'click .remove': function (e, value, row, index) {
                console.log(row);
                $table.bootstrapTable('remove', {
                    field: 'id',
                    values: [row.id]
                });
            }
        };
    });

    function operateFormatter(value, row, index) {
        return [
            '<a rel="tooltip" title="View" class="btn btn-link btn-info btn-icon table-action view" href="javascript:void(0)">',
                '<i class="fa fa-image"></i>',
            '</a>',
            '<a rel="tooltip" title="Edit" class="btn btn-link btn-warning btn-icon table-action edit" href="javascript:void(0)">',
                '<i class="fa fa-edit"></i>',
            '</a>',
            '<a rel="tooltip" title="Remove" class="btn btn-link btn-danger btn-icon table-action remove" href="javascript:void(0)">',
                '<i class="fa fa-remove"></i>',
            '</a>'
        ].join('');
    }


</script>

Sweet Alert v7.0.7 Live Demo

If you want to replace the classic alert box with something that looks amazing, you can use the Sweet Alert 2 Plugin. We have changed the typography and colors for the plugin provided by Tristan Edwards. If you want to see the full documentation, please check out this page.

If you want to see a basic coded example, here is one below. 

<button class="btn btn-default btn-fill" onclick='swal("Good job!", "You clicked the button!", "success")'>Try me!</button>
<!-- for more actions that you can use onclick, please check out demo.js -->

DateTimePicker v4.7.14 Live Demo

We have created a date-time picker starting from this wonderful plugin created by Eonasdan. We have changed the culors, typography and buttons, so it can look like the rest of the dashboard.

Here is a coded example: 

<!-- input with datetimepicker -->
<div class="form-group">
	<input id="datetimepicker" type="text" class="form-control datetimepicker" placeholder="Datetime Picker Here">
</div>

<!-- javascript for init -->
$('.datetimepicker').datetimepicker({
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
    }
});

Charts Live Demo

For the implementation of graphic charts, we used the Chartist plugin and added our custom styles. The plugin is free to download and use here. Gion Kunz is the guy behind the project; he did an awesome job and we recommend using it his stuff. Besides all the great customisation that you have using it, it is also fully responsive. We changed the colors, background and typography.

Line Chart

We recommend using this chart when you have easy to understand information, that can be conveyed in a single line throughout a continuous period.

24 Hours Performance 

<!-- graphic area in html -->

<h4> <br><small>24 Hours Performance</small></h4>
<div id="chartPerformance" class="ct-chart "></div>

<!-- javascript -->

var dataPerformance = {
  labels: ['9pm', '2am', '8am', '2pm', '8pm'],
  series: [
    [1, 6, 8, 7, 4, 7, 8, 12, 16, 17, 14, 13]
  ]
};

var optionsPerformance = {
  showPoint: false,
  lineSmooth: true,
  axisX: {
    showGrid: false,
    showLabel: true
  },
  axisY: {
    offset: 40,
  },
  low: 0,
  high: 20
};

Chartist.Line('#chartPerformance', dataPerformance, optionsPerformance);

Line Chart with Points

This graphic is best used when you have multiple results for different points and you want to show a correlation (growth, down-side, etc).

NASDAQ: AAPL 


<!-- graphic area in html -->

<h4></small> <br><small>NASDAQ: AAPL</small></h4>
<div id="chartStock" class="ct-chart "></div>

<!-- javascript -->
var dataStock = {
  labels: ['2009', '2010', '2011', '2012', '2013', '2014'],
  series: [
    [22.20, 28.16, 34.90, 42.28, 47.26, 48.89, 51.93, 55.32, 59.21, 62.21, 75.50, 80.23, 60.32, 55.03, 62.21, 78.83, 82.12, 89.21, 102.50, 107.23]
  ]
};

var optionsStock = {
  lineSmooth: false,
  axisY: {
    offset: 40,
    labelInterpolationFnc: function(value) {
        return '$' + value;
      }
  },
  low: 10,
  high: 110,
   classNames: {
      point: 'ct-point ct-green',
      line: 'ct-line ct-green'
  }
};
var $chart = $('#chartStock');

Chartist.Line('#chartStock', dataStock, optionsStock);

Multiple Lines Chart

We recommend you use this graphic when you need to show multiple functions in the same visual element. For example, you can see a correlation between the registered versus active users. Always try to use a legend when you have multiple elements in the graphic.

Users Behavior

Legend
Visited Site Register Login 2nd time 
<!-- graphic area in html -->

<h4><small>Users Behavior</small></h4>
<div id="chartSales" class="ct-chart "></div>
<h6>Legend</h6>
<i class="fa fa-circle text-info"></i> Visited Site<br>
<i class="fa fa-circle text-danger"></i> Register<br>
<i class="fa fa-circle text-warning"></i> Login 2nd time
<!-- javascript -->
var dataSales = {
  labels: ['2009', '2010', '2011', '2012', '2013', '2014'],
  series: [
    [287, 385, 490, 492, 554, 586, 698, 695, 752, 788, 846, 944],
    [67, 152, 143, 240, 287, 335, 435, 437, 539, 542, 544, 647],
    [23, 113, 67, 108, 190, 239, 307, 308, 439, 410, 410, 509]
  ]
};

var optionsSales = {
  lineSmooth: false,
  axisY: {
    offset: 40
  },
  low: 0,
  high: 1000
};

Chartist.Line('#chartSales', dataSales, optionsSales);

Pie Chart

A pie chart is the easiest way to represent an information. Use it whenever you want to show something understandable at once.

Public Preferences

Legend
Apple Samsung BlackBerry Windows Phone 
<!-- graphic area in html -->

<h4><small>Public Preferences</small></h4>
<div class="row margin-top">
 <div class="col-md-10 col-md-offset-1">
     <div id="chartPreferences" class="ct-chart "></div>
 </div>
</div>
<div class="row">
 <div class="col-md-10 col-md-offset-1">
     <h6>Legend</h6>
     <i class="fa fa-circle text-info"></i> Apple
     <i class="fa fa-circle text-success"></i> Samsung
     <i class="fa fa-circle text-warning"></i> BlackBerry
     <i class="fa fa-circle text-danger"></i> Windows Phone
 </div>
</div>

<!-- javascript -->
Chartist.Pie('#chartPreferences', {
  labels: ['46%','28%','15%','11%'],
  series: [46, 28, 15, 11]
});

Bar Chart

We recommend using the bar chart whenever you want to show progress over periods of time. Here is an example.

Views 

<!-- graphic area in html -->

<h4><small>Views</small></h4>
<div id="chartViews" class="ct-chart "></div>

<!-- javascript -->
var dataViews = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
  ]
};


var optionsViews = {
  seriesBarDistance: 10,
  classNames: {
    bar: 'ct-bar ct-azure'
  },
  axisX: {
    showGrid: false
  }
};

var responsiveOptionsViews = [
  ['screen and (max-width: 640px)', {
    seriesBarDistance: 5,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value[0];
      }
    }
  }]
];

Chartist.Bar('#chartViews', dataViews, optionsViews, responsiveOptionsViews);

Multiple Bars Chart

Go for multiple bars charts if you want to show two indicators side by side.

Activity
Multiple Bars Chart

Legend
Views Reads 
<!-- graphic area in html -->

<h4>Activity <br><small>Multiple Bars Chart</small></h4>
<div id="chartActivity" class="ct-chart "></div>
<h6>Legend</h6>
<span class="label label-info">Views</span>
<span class="label label-success">Reads</span>

<!-- javascript -->
var data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  series: [
    [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],
    [412, 243, 280, 580, 453, 353, 300, 364, 368, 410, 636, 695]
  ]
};

var options = {
  seriesBarDistance: 10,
   axisX: {
        showGrid: false
    }
};

var responsiveOptions = [
  ['screen and (max-width: 640px)', {
    seriesBarDistance: 5,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value[0];
      }
    }
  }]
];

Chartist.Bar('#chartActivity', data, options, responsiveOptions);

Google Maps Live Demo

We changed the classic Google Maps by adding special skins and putting them in cards. If you want to see the full documentation from Google, you can see the docs here.

Below, you will find a coded example:

Regular Map

<!-- card for the map -->
<div class="card">
    <div class="header">
        <p class="category">Regular Map</p>
    </div>
    <div class="content">
        <div id="regularMap" class="map"></div>
    </div>
</div>

<!-- javascript for init -->
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
var mapOptions = {
    zoom: 8,
    center: myLatlng,
    scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
}

var map = new google.maps.Map(document.getElementById("regularMap"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Regular Map!"
});

marker.setMap(map);

});

jVector Maps Live Demo

We have integrated and changed the look for the jVector Maps. We recommend using them for statistics for countries. To see the original documentation from Kirill Lebedev, you can go here.

If you want to see how it looks and how you can use this map, here is an example. 

<!-- card for the map -->
<div class="card card-plain">
    <div class="content">
        <div id="worldMap" class="map map-big"></div>
    </div>
</div>

<!-- javascript for init -->
 var mapData = {
        "AU": 760,
        "BR": 550,
        "CA": 120,
        "DE": 1300,
        "FR": 540,
        "GB": 690,
        "GE": 200,
        "IN": 200,
        "RO": 600,
        "RU": 300,
        "US": 2920,
    };

    $('#worldMap').vectorMap({
        map: 'world_mill_en',
        backgroundColor: "transparent",
        regionStyle: {
            initial: {
                fill: '#e4e4e4',
                "fill-opacity": 0.9,
                stroke: 'none',
                "stroke-width": 0,
                "stroke-opacity": 0
            }
        },

        series: {
            regions: [{
                values: mapData,
                scale: ["#AAAAAA","#444444"],
                normalizeFunction: 'polynomial'
            }]
        },
    });

});

Wizard Live Demo

If you have lengthy forms to complete, you can use the Bootstrap Wizard. This plugin allows you to cut the form into steps and let the user complete it gradually. We have worked over the original repository from Vincent Gabriel, which you can find here.

We have changed the typography, inputs, buttons and we have added validation for inputs. You can see how it looks and feels in the live demo.

jQuery Validate for Forms Live Demo

If you have required fields in forms, the best way to add validation for them is through the jQuery Validation tool. We have imported it into the Light Bootstrap DashBoard library and changed its colors. To see the original and full documentation from jQueryValidation, you can go here.

If you want to see a basic login example and the code behind it, check out the example below:

Login Form
* Required fields
<!-- html for login -->
<div class="card">
    <form id="loginFormValidation" action="" method="" novalidate="">
        <div class="header text-center">Login Form</div>
        <div class="content">

            <div class="form-group">
                <label class="control-label">Email Address <star>*</star></label>
                <input class="form-control"
                       name="email"
                       type="text"
                       email="true"
                       required="true"
                />
            </div>

            <div class="form-group">
                <label class="control-label">Password <star>*</star></label>
                <input class="form-control"
                       name="password"
                       id="registerPassword"
                       type="password"
                       required="true"
                />
            </div>

            <div class="category"><star>*</star> Required fields</div>
        </div>

        <div class="footer text-center">
            <button type="submit" class="btn btn-info btn-fill btn-wd">Register</button>
        </div>
    </form>
</div>

<!-- javascript for validation -->
$('#loginFormValidation').validate();

How to setup Google API Keys

  1. Go to https://developers.google.com/maps/documentation/javascript/get-api-key

  2. Scroll to the “Get an API key” Title and press the “Get a Key” Button

  3. Choose a name for your project then press on Create and Enable API

  4. Get the Key and place it in your project where is this script: 

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>

Changing Colors (SASS)

You can change the default colors via variables from SASS:

  1. You can find the colors in assets/sass/lbd/_variables.scss starting with line 4 where is the primary color set: $color-azure: #23CCEF;.
  2. Add the SASS folder from assets/sass/ to a new project inside Koala Compiler and find the file material-kit.scss, it will be the one in Green.
  3. Right click on that file and set the output path, it must be in assets/css/ so anything that you compile will overwrite the original light-bootstrap-dashboard.css
  4. Press on compile and everything will be done automatically.