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 4 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 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
├── assets
│   ├── css
│   ├── fonts
│   ├── img
│   ├── js
│   │   ├── core
│   │   │   ├── bootstrap.min.js
│   │   │   ├── jquery.3.2.1.min.js
│   │   │   └── popper.min.js
│   │   ├── demo.js
│   │   ├── light-bootstrap-dashboard.js
│   │   └── plugins
│   │       ├── bootstrap-datepicker.js
│   │       ├── bootstrap-notify.js
│   │       ├── bootstrap-switch.js
│   │       ├── chartist.min.js
│   │       ├── jquery.sharrre.js
│   │       └── nouislider.min.js
│   └── main.css
├── documentation
│   ├── template.html
│   └── tutorial-components.html
├── examples
│   ├── dashboard.html
│   ├── forms
│   │   └── extended.html
│   ├── icons.html
│   ├── maps.html
│   ├── notifications.html
│   ├── table.html
│   ├── typography.html
│   ├── upgrade.html
│   └── user.html
├── nucleo-icons.html
├── package-lock.json
├── CHANGELOG.md
└── README.md
			

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 ( https://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:


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

<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="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" 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" disabled checked>
        <span class="form-check-sign"></span>
        Disabled Checked
    </label>
</div>

Radio Buttons

To use the custom radio buttons, just take the code below and use it.

<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>
        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="exampleRadios2" value="option2" checked>
        <span class="form-check-sign"></span>
        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="exampleRadio1" id="exampleRadios1" value="option1" disabled>
        <span class="form-check-sign"></span>
        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="exampleRadio1" id="exampleRadios2" value="option2" checked disabled>
        <span class="form-check-sign"></span>
        Radio disabled 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.

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

<textarea class="form-control" placeholder="Here can be your nice text" rows="3"></textarea>
<nav class="navbar navbar-expand-lg">
	<div class="container">
		<a class="navbar-brand" href="#pablo"> Dashboard </a>

		<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"  aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-bar burger-lines"></span>
			<span class="navbar-toggler-bar burger-lines"></span>
			<span class="navbar-toggler-bar burger-lines"></span>
		</button>

	    <div class="collapse navbar-collapse justify-content-end">
            <ul class="nav navbar-nav mr-auto">
                <li class="nav-item">
                    <a href="#" class="nav-link" data-toggle="dropdown">
						<i class="nc-icon nc-palette"></i>

						<span class="d-lg-none">Dashboard</span>
                    </a>
                </li>
                <li class="dropdown nav-item">
                      <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
							<i class="nc-icon nc-planet"></i>
                            <span class="notification">5</span>
							<span class="d-lg-none">Notification</span>
                      </a>
                      <ul class="dropdown-menu">
                        <a class="dropdown-item" href="#">Notification 1</a>
                        <a class="dropdown-item" href="#">Notification 2</a>
                        <a class="dropdown-item" href="#">Notification 3</a>
                        <a class="dropdown-item" href="#">Notification 4</a>
                        <a class="dropdown-item" href="#">Another notification</a>
                      </ul>
                </li>
                <li class="nav-item">
                   <a href="#" class="nav-link">
						<i class="nc-icon nc-zoom-split"></i>
						<span class="d-lg-block">&nbsp;Search</span>
                    </a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
            	<li class="nav-item">
                    <a class="nav-link" href="#pablo">
                    	<span class="no-icon">Account</span>
                    </a>
            	</li>
            	<li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="https://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    	<span class="no-icon">Dropdown</span>

                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    	<a class="dropdown-item" href="#">Action</a>
                    	<a class="dropdown-item" href="#">Another action</a>
                    	<a class="dropdown-item" href="#">Something</a>
                    	<a class="dropdown-item" href="#">Something else here</a>
                    	<div class="divider"></div>
                    	<a class="dropdown-item" href="#">Separated link</a>
                    </div>
            	</li>
            </ul>
	    </div>
	</div>
</nav>

Fixed Navbar: If you want to have a "Fixed Navbar" on Desktop and Mobile please add the class "navbar-fixed" on the tag "nav" and move the entire "nav" structure outside of the div with class "main-panel". Check the example implementation for more details:

Tables

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:

Striped Table with Hover

ID Name Salary Country City
1 Dakota Rice $36,738 Niger Oud-Turnhout
2 Minerva Hooper $23,789 Curaçao Sinaai-Waas
3 Sage Rodriguez $56,142 Netherlands Baileux
4 Philip Chaney $38,735 Korea, South Overland Park
5 Doris Greene $63,542 Malawi Feldkirchen in Kärnten
6 Mason Porter $78,615 Chile Gloucester
<div class="table-responsive table-full-width">
	<table class="table table-hover table-striped">
		<thead>
			<th>ID</th>
			<th>Name</th>
			<th>Salary</th>
			<th>Country</th>
			<th>City</th>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Dakota Rice</td>
				<td>$36,738</td>
				<td>Niger</td>
				<td>Oud-Turnhout</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Minerva Hooper</td>
				<td>$23,789</td>
				<td>Curaçao</td>
				<td>Sinaai-Waas</td>
			</tr>
			<tr>
				<td>3</td>
				<td>Sage Rodriguez</td>
				<td>$56,142</td>
				<td>Netherlands</td>
				<td>Baileux</td>
			</tr>
			<tr>
				<td>4</td>
				<td>Philip Chaney</td>
				<td>$38,735</td>
				<td>Korea, South</td>
				<td>Overland Park</td>
			</tr>
			<tr>
				<td>5</td>
				<td>Doris Greene</td>
				<td>$63,542</td>
				<td>Malawi</td>
				<td>Feldkirchen in Kärnten</td>
			</tr>
			<tr>
				<td>6</td>
				<td>Mason Porter</td>
				<td>$78,615</td>
				<td>Chile</td>
				<td>Gloucester</td>
			</tr>
		</tbody>
	</table>

</div>

Table on Plain Background

ID Name Salary Country City
1 Dakota Rice $36,738 Niger Oud-Turnhout
2 Minerva Hooper $23,789 Curaçao Sinaai-Waas
3 Sage Rodriguez $56,142 Netherlands Baileux
4 Philip Chaney $38,735 Korea, South Overland Park
5 Doris Greene $63,542 Malawi Feldkirchen in Kärnten
6 Mason Porter $78,615 Chile Gloucester
<div class="table-responsive table-full-width">
	<table class="table table-hover">
        <thead>
            <th>ID</th>
            <th>Name</th>
            <th>Salary</th>
            <th>Country</th>
            <th>City</th>
        </thead>
        <tbody>
            <tr>
            	<td>1</td>
            	<td>Dakota Rice</td>
            	<td>$36,738</td>
            	<td>Niger</td>
            	<td>Oud-Turnhout</td>
            </tr>
            <tr>
            	<td>2</td>
            	<td>Minerva Hooper</td>
            	<td>$23,789</td>
            	<td>Curaçao</td>
            	<td>Sinaai-Waas</td>
            </tr>
            <tr>
            	<td>3</td>
            	<td>Sage Rodriguez</td>
            	<td>$56,142</td>
            	<td>Netherlands</td>
            	<td>Baileux</td>
            </tr>
            <tr>
            	<td>4</td>
            	<td>Philip Chaney</td>
            	<td>$38,735</td>
            	<td>Korea, South</td>
            	<td>Overland Park</td>
            </tr>
            <tr>
            	<td>5</td>
            	<td>Doris Greene</td>
            	<td>$63,542</td>
            	<td>Malawi</td>
            	<td>Feldkirchen in Kärnten</td>
            </tr>
            <tr>
            	<td>6</td>
            	<td>Mason Porter</td>
            	<td>$78,615</td>
            	<td>Chile</td>
            	<td>Gloucester</td>
            </tr>
        </tbody>
	</table>

</div>

Notifications

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
		}
	});
}