Laravel setup

Speed up your web development with the Bootstrap 4 Admin Dashboard built for Laravel Framework 5.5 and up.

Note

We recommend installing this preset on a project that you are starting from scratch, otherwise your project's design might break.


Prerequisites

If you don't already have an Apache local environment with PHP and MySQL, use one of the following links:

Also, you will need to install Composer: https://getcomposer.org/doc/00-intro.md

And Laravel: https://laravel.com/docs/7.x/installation


Installation

After initializing a fresh instance of Laravel (and making all the necessary configurations), install the preset using one of the provided methods:

Via composer

  1. Cd to your Laravel app
  2. Type in your terminal: composer require laravel/ui and php artisan ui vue --auth
  3. Install this preset via composer require laravel-frontend-presets/light-bootstrap-dashboard. No need to register the service provider. Laravel 5.5 & up can auto detect the package.
  4. Run php artisan ui light-bootstrap command to install the Light Bootstrap Dashboard preset. This will install all the necessary light-bootstrap and also the custom auth views, it will also add the auth route in routes/web.php (NOTE: If you run this command several times, be sure to clean up the duplicate Auth entries in routes/web.php)
  5. In your terminal run composer dump-autoload
  6. Run php artisan migrate --seed to create basic users table

By using the archive

  1. In your application's root create a presets folder
  2. Download an archive of the repo and unzip it
  3. Copy and paste light-bootstrap-dashboard-master folder in presets (created in step 2) and rename it to light-bootstrap
  4. Open composer.json file
  5. Add "LaravelFrontendPresets\\LightBootstrapPreset\\": "presets/light-bootstrap/src" to autoload/psr-4 and to autoload-dev/psr-4
  6. Add LaravelFrontendPresets\LightBootstraplPreset\LightBootstrapPresetServiceProvider::class to config/app.php file
  7. Type in your terminal: composer require laravel/ui and php artisan ui vue --auth
  8. In your terminal run composer dump-autoload
  9. Run php artisan ui light-bootstrap command to install the Light Bootstrap preset. This will install all the necessary light-bootstrap and also the custom auth views, it will also add the auth route in routes/web.php (NOTE: If you run this command several times, be sure to clean up the duplicate Auth entries in routes/web.php)
  10. Run php artisan migrate --seed to create basic users table

Usage

To start testing the preset, register as a user or log in using the default user:

Make sure to run the migrations and seeders for the above credentials to be available.

Besides the dashboard and the auth pages this preset also has an edit profile page. All the necessary files (controllers, requests, views) are installed out of the box and all the needed routes are added to routes/web.php. Keep in mind that all of the features can be viewed once you login using the credentials provided above or by registering your own user.


Dashboard

You can access the dashboard either by using the "Dashboards/Dashboard" link in the left sidebar or by adding /home in the URL.

File Structure

Once you have downloaded the archive and opened it, you will find the following structure:

Let's take it one by one:

    |   composer.json
    |   composer.lock
    |   package.json
    |   phpunit.xml
    |   README.md
    |   server.php
    |   yarn.lock
    |   
    +--- app
    │   ├── Console
    │   │   └── Kernel.php
    │   ├── Exceptions
    │   │   └── Handler.php
    │   ├── Http
    │   │   ├── Controllers
    │   │   │   ├── Auth
    │   │   │   │   ├── ForgotPasswordController.php
    │   │   │   │   ├── LoginController.php
    │   │   │   │   ├── RegisterController.php
    │   │   │   │   ├── ResetPasswordController.php
    │   │   │   │   └── VerificationController.php
    │   │   │   ├── Controller.php
    │   │   │   ├── HomeController.php
    │   │   │   ├── PageController.php
    │   │   │   ├── ProfileController.php
    │   │   │   └── UserController.php
    │   │   ├── Kernel.php
    │   │   ├── Middleware
    │   │   │   ├── Authenticate.php
    │   │   │   ├── CheckForMaintenanceMode.php
    │   │   │   ├── EncryptCookies.php
    │   │   │   ├── RedirectIfAuthenticated.php
    │   │   │   ├── TrimStrings.php
    │   │   │   ├── TrustProxies.php
    │   │   │   └── VerifyCsrfToken.php
    │   │   └── Requests
    │   │       ├── PasswordRequest.php
    │   │       ├── ProfileRequest.php
    │   │       └── UserRequest.php
    │   ├── Providers
    │   │   ├── AppServiceProvider.php
    │   │   ├── AuthServiceProvider.php
    │   │   ├── BroadcastServiceProvider.php
    │   │   ├── EventServiceProvider.php
    │   │   └── RouteServiceProvider.php
    │   ├── Rules
    │   │   └── CurrentPasswordCheckRule.php
    │   └── User.php
    ├── artisan
    ├── bootstrap
    │   ├── app.php
    │   └── cache
    │       ├── packages.php
    │       └── services.php
    ├── composer.json
    ├── composer.lock
    ├── config
    │   ├── app.php
    │   ├── auth.php
    │   ├── broadcasting.php
    │   ├── cache.php
    │   ├── database.php
    │   ├── filesystems.php
    │   ├── hashing.php
    │   ├── logging.php
    │   ├── mail.php
    │   ├── queue.php
    │   ├── services.php
    │   ├── session.php
    │   └── view.php
    ├── database
    │   ├── factories
    │   │   └── UserFactory.php
    │   ├── migrations
    │   │   ├── 2014_10_12_000000_create_users_table.php
    │   │   └── 2014_10_12_100000_create_password_resets_table.php
    │   └── seeds
    │       ├── DatabaseSeeder.php
    │       └── UsersTableSeeder.php
    ├── package.json
    ├── phpunit.xml
    ├── public
    │   ├── favicon.ico
    │   ├── index.php
    │   ├── light-bootstrap
    │   │   ├── css
    │   │   │   ├── bootstrap.min.css
    │   │   │   ├── demo.css
    │   │   │   └── light-bootstrap-dashboard.css
    │   │   ├── fonts
    │   │   │   ├── nucleo-icons.eot
    │   │   │   ├── nucleo-icons.svg
    │   │   │   ├── nucleo-icons.ttf
    │   │   │   ├── nucleo-icons.woff
    │   │   │   └── nucleo-icons.woff2
    │   │   ├── img
    │   │   │   ├── apple-icon.png
    │   │   │   ├── bg5.jpg
    │   │   │   ├── default-avatar.png
    │   │   │   ├── faces
    │   │   │   │   ├── face-0.jpg
    │   │   │   │   ├── face-1.jpg
    │   │   │   │   ├── face-2.jpg
    │   │   │   │   ├── face-3.jpg
    │   │   │   │   ├── face-4.jpg
    │   │   │   │   ├── face-5.jpg
    │   │   │   │   ├── face-6.jpg
    │   │   │   │   ├── face-7.jpg
    │   │   │   │   └── tim_vector.jpe
    │   │   │   ├── favicon.ico
    │   │   │   ├── full-screen-image-2.jpg
    │   │   │   ├── full-screen-image-3.jpg
    │   │   │   ├── laravel.svg
    │   │   │   ├── loading-bubbles.svg
    │   │   │   ├── mask.png
    │   │   │   ├── new_logo.png
    │   │   │   ├── sidebar-1.jpg
    │   │   │   ├── sidebar-2.jpg
    │   │   │   ├── sidebar-3.jpg
    │   │   │   ├── sidebar-4.jpg
    │   │   │   ├── sidebar-5.jpg
    │   │   │   └── tim_80x80.png
    │   │   ├── 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
    │   │   │       └── nouislider.min.js
    │   │   └── sass
    │   │       ├── lbd
    │   │       │   ├── _alerts.scss
    │   │       │   ├── _bootstrap-switch.scss
    │   │       │   ├── _buttons.scss
    │   │       │   ├── _cards.scss
    │   │       │   ├── _chartist.scss
    │   │       │   ├── _checkbox-radio-switch.scss
    │   │       │   ├── _dropdown.scss
    │   │       │   ├── _footers.scss
    │   │       │   ├── _inputs.scss
    │   │       │   ├── _misc.scss
    │   │       │   ├── mixins
    │   │       │   │   ├── _buttons.scss
    │   │       │   │   ├── _cards.scss
    │   │       │   │   ├── _chartist.scss
    │   │       │   │   ├── _icons.scss
    │   │       │   │   ├── _inputs.scss
    │   │       │   │   ├── _labels.scss
    │   │       │   │   ├── _morphing-buttons.scss
    │   │       │   │   ├── _navbars.scss
    │   │       │   │   ├── _social-buttons.scss
    │   │       │   │   ├── _tabs.scss
    │   │       │   │   ├── _transparency.scss
    │   │       │   │   └── _vendor-prefixes.scss
    │   │       │   ├── _mixins.scss
    │   │       │   ├── _navbars.scss
    │   │       │   ├── _partial-nucleo-icons.scss
    │   │       │   ├── plugins
    │   │       │   │   ├── _animate.scss
    │   │       │   │   └── _datetime-picker.scss
    │   │       │   ├── _responsive.scss
    │   │       │   ├── _sidebar-and-main-panel.scss
    │   │       │   ├── _tables.scss
    │   │       │   ├── _typography.scss
    │   │       │   └── _variables.scss
    │   │       └── light-bootstrap-dashboard.scss
    │   └── robots.txt
    ├── resources
    │   ├── js
    │   │   ├── app.js
    │   │   ├── bootstrap.js
    │   │   └── components
    │   │       └── ExampleComponent.vue
    │   ├── lang
    │   │   └── en
    │   │       ├── auth.php
    │   │       ├── pagination.php
    │   │       ├── passwords.php
    │   │       └── validation.php
    │   ├── sass
    │   │   ├── app.scss
    │   │   └── _variables.scss
    │   └── views
    │       ├── alerts
    │       │   ├── errors.blade.php
    │       │   ├── error_self_update.blade.php
    │       │   ├── feedback.blade.php
    │       │   ├── migrations_check.blade.php
    │       │   └── success.blade.php
    │       ├── auth
    │       │   ├── login.blade.php
    │       │   ├── passwords
    │       │   │   ├── email.blade.php
    │       │   │   └── reset.blade.php
    │       │   ├── register.blade.php
    │       │   └── verify.blade.php
    │       ├── dashboard.blade.php
    │       ├── layouts
    │       │   ├── app.blade.php
    │       │   ├── footer
    │       │   │   └── nav.blade.php
    │       │   └── navbars
    │       │       ├── navbar.blade.php
    │       │       ├── navs
    │       │       │   ├── auth.blade.php
    │       │       │   └── guest.blade.php
    │       │       └── sidebar.blade.php
    │       ├── pages
    │       │   ├── icons.blade.php
    │       │   ├── maps.blade.php
    │       │   ├── notifications.blade.php
    │       │   ├── table.blade.php
    │       │   ├── typography.blade.php
    │       │   └── upgrade.blade.php
    │       ├── profile
    │       │   └── edit.blade.php
    │       ├── users
    │       │   └── index.blade.php
    │       └── welcome.blade.php
    ├── routes
    │   ├── api.php
    │   ├── channels.php
    │   ├── console.php
    │   └── web.php
    ├── server.php
    ├── storage
    │   ├── app
    │   │   └── public
    │   ├── framework
    │   │   ├── cache
    │   │   │   └── data
    │   │   │       ├── 1a
    │   │   │       │   └── 43
    │   │   │       │       └── 1a43d4d8a10fba3a5857264007fd4f8494990eb9
    │   │   │       └── f0
    │   │   │           └── a7
    │   │   │               └── f0a70bbe9f0a2fbd95a4dee84fb8f092e00acc29
    │   │   ├── sessions
    │   │   │   └── bDASqge6ugwwnupCJQxc6UpeCzU5mWnlBf3OtHbV
    │   │   ├── testing
    │   │   └── views
    │   └── logs
    │       ├── laravel-2019-08-07.log
    │       ├── laravel-2019-08-08.log
    │       └── laravel-2019-08-09.log
    ├── tests
    │   ├── CreatesApplication.php
    │   ├── Feature
    │   │   └── ExampleTest.php
    │   ├── TestCase.php
    │   └── Unit
    │       └── ExampleTest.php
                                        

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.

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

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.

Profile edit

You have the option to edit the current logged in user's profile information (name, email, profile picture) and password. To access this page, just click the "Examples/Profile" link in the left sidebar or add /profile in the URL.

The App\Http\Controllers\ProfileController handles the update of the user information and password.

                                                
        public function update(ProfileRequest $request)
        {
            auth()->user()->update($request->all());
    
            return back()->withStatus(__('Profile successfully updated.'));
        }
    
        /**
            * Change the password
            *
            * @param  \App\Http\Requests\PasswordRequest  $request
            * @return \Illuminate\Http\RedirectResponse
            */
        public function password(PasswordRequest $request)
        {
            auth()->user()->update(['password' => Hash::make($request->get('password'))]);
    
            return back()->withPasswordStatus(__('Password successfully updated.'));
        }
                                                
                                            

If you input the wrong data when editing the profile, don`t worry. Validation rules have been added to prevent this (see App\Http\Requests\ProfileRequest). If you try to change the password, you will see that additional validation rules have been added in App\Http\Requests\PasswordRequest. You also have a custom validation rule that can be found in App\Rules\CurrentPasswordCheckRule.

                                                
        public function rules()
        {
            return [
                'old_password' => ['required', 'min:6', new CurrentPasswordCheckRule],
                'password' => ['required', 'min:6', 'confirmed', 'different:old_password'],
                'password_confirmation' => ['required', 'min:6'],
            ];
        }
                                                
                                            

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