Laravel setup

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

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


Installation

  1. Unzip the downloaded archive
  2. Copy and paste light-bootstrap-dashbaord-master folder in your projects folder. Rename the folder to your project's name
  3. In your terminal run composer install
  4. Copy .env.example to .env and updated the configurations (mainly the database configuration)
  5. In your terminal run php artisan key:generate
  6. Run php artisan migrate --seed to create the database tables and seed the roles and users tables
  7. Run php artisan storage:link to create the storage symlink (if you are using Vagrant with Homestead for development, remember to ssh into your virtual machine and run the command from there).

Usage

To start testing the Pro theme, register as a user or log in using one of the default users:

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

In addition to the features included in the free preset, the Pro theme also has a role management example with an updated user management, as well as tag management, category management and item management examples. 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 the features can be viewed once you log in using the credentials provided above or by registering your own user.

Each role has a different privilege level and can perform a certain number of actions according to this level.

A member type user can log in, update his profile and view a list of added items.
A creator type user can log in, update his profile and perform actions on categories, tags and items.
A admin type user can log in, update his profile and perform actions on categories, tags, items, roles and users


Dashboard

You can access the dashboard either by using the "Dashboards/Dashboard" link in the left sidebar or by adding /dashboard 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:

|   artisan
|   composer.json
|   composer.lock
|   package.json
|   phpunit.xml
|   README.md
|   server.php
|   yarn.lock
|   
+--- app
│   ├── Category.php
│   ├── Console
│   │   └── Kernel.php
│   ├── Exceptions
│   │   └── Handler.php
│   ├── Http
│   │   ├── Controllers
│   │   │   ├── Auth
│   │   │   │   ├── ForgotPasswordController.php
│   │   │   │   ├── LoginController.php
│   │   │   │   ├── RegisterController.php
│   │   │   │   ├── ResetPasswordController.php
│   │   │   │   └── VerificationController.php
│   │   │   ├── CategoryController.php
│   │   │   ├── Controller.php
│   │   │   ├── HomeController.php
│   │   │   ├── ItemController.php
│   │   │   ├── PageController.php
│   │   │   ├── ProfileController.php
│   │   │   ├── RoleController.php
│   │   │   ├── TagController.php
│   │   │   └── UserController.php
│   │   ├── Kernel.php
│   │   ├── Middleware
│   │   │   ├── Authenticate.php
│   │   │   ├── CheckForMaintenanceMode.php
│   │   │   ├── EncryptCookies.php
│   │   │   ├── RedirectIfAuthenticated.php
│   │   │   ├── TrimStrings.php
│   │   │   ├── TrustProxies.php
│   │   │   └── VerifyCsrfToken.php
│   │   └── Requests
│   │       ├── CategoryRequest.php
│   │       ├── ItemRequest.php
│   │       ├── PasswordRequest.php
│   │       ├── ProfileRequest.php
│   │       ├── RoleRequest.php
│   │       ├── TagRequest.php
│   │       └── UserRequest.php
│   ├── Item.php
│   ├── Observers
│   │   ├── ItemObserver.php
│   │   └── UserObserver.php
│   ├── Policies
│   │   ├── CategoryPolicy.php
│   │   ├── ItemPolicy.php
│   │   ├── RolePolicy.php
│   │   ├── TagPolicy.php
│   │   └── UserPolicy.php
│   ├── Providers
│   │   ├── AppServiceProvider.php
│   │   ├── AuthServiceProvider.php
│   │   ├── BroadcastServiceProvider.php
│   │   ├── EventServiceProvider.php
│   │   └── RouteServiceProvider.php
│   ├── Role.php
│   ├── Rules
│   │   └── CurrentPasswordCheckRule.php
│   ├── Tag.php
│   └── User.php
├── artisan
├── bootstrap
│   ├── app.php
│   └── cache
│       ├── config.php
│       ├── 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_100000_create_password_resets_table.php
│   │   ├── 2019_01_15_100000_create_roles_table.php
│   │   ├── 2019_01_15_110000_create_users_table.php
│   │   ├── 2019_01_17_121504_create_categories_table.php
│   │   ├── 2019_01_21_130422_create_tags_table.php
│   │   ├── 2019_01_21_163402_create_items_table.php
│   │   ├── 2019_01_21_163414_create_item_tag_table.php
│   │   ├── 2019_03_06_132557_add_photo_column_to_users_table.php
│   │   ├── 2019_03_06_143255_add_fields_to_items_table.php
│   │   └── 2019_03_20_090438_add_color_tags_table.php
│   └── seeds
│       ├── CategoriesTableSeeder.php
│       ├── DatabaseSeeder.php
│       ├── ItemsTableSeeder.php
│       ├── RolesTableSeeder.php
│       ├── TagsTableSeeder.php
│       └── UsersTableSeeder.php
├── package.json
├── phpunit.xml
├── public
│   ├── css
│   │   ├── bootstrap.min.css
│   │   ├── demo.css
│   │   ├── documentation.css
│   │   └── light-bootstrap-dashboard.css
│   ├── favicon.ico
│   ├── fonts
│   │   ├── nucleo-icons.eot
│   │   ├── nucleo-icons.svg
│   │   ├── nucleo-icons.ttf
│   │   ├── nucleo-icons.woff
│   │   └── nucleo-icons.woff2
│   ├── img
│   │   ├── apple-icon.png
│   │   ├── bg11.jpg
│   │   ├── bg4.jpg
│   │   ├── bg5.jpg
│   │   ├── bg6.jpg
│   │   ├── bg7.jpg
│   │   ├── bg8.jpg
│   │   ├── blog-1.jpg
│   │   ├── blog-2.jpg
│   │   ├── blog-3.jpg
│   │   ├── blog-4.jpg
│   │   ├── blog-5.jpg
│   │   ├── carousel_1.jpg
│   │   ├── carousel_2.jpg
│   │   ├── carousel_3.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
│   │   │   ├── margot.jpg
│   │   │   └── tim_vector.jpe
│   │   ├── favicon.ico
│   │   ├── flags
│   │   │   ├── AD.png
│   │   │   ├── AE.png
│   │   │   ├── AG.png
│   │   │   ├── AM.png
│   │   │   ├── AR.png
│   │   │   ├── AT.png
│   │   │   ├── AU.png
│   │   │   ├── BE.png
│   │   │   ├── BF.png
│   │   │   ├── BG.png
│   │   │   ├── BO.png
│   │   │   ├── BR.png
│   │   │   ├── CA.png
│   │   │   ├── CD.png
│   │   │   ├── CG.png
│   │   │   ├── CH.png
│   │   │   ├── CL.png
│   │   │   ├── CM.png
│   │   │   ├── CN.png
│   │   │   ├── CO.png
│   │   │   ├── CZ.png
│   │   │   ├── DE.png
│   │   │   ├── DJ.png
│   │   │   ├── DK.png
│   │   │   ├── DZ.png
│   │   │   ├── EE.png
│   │   │   ├── EG.png
│   │   │   ├── ES.png
│   │   │   ├── FI.png
│   │   │   ├── FR.png
│   │   │   ├── GA.png
│   │   │   ├── GB.png
│   │   │   ├── GM.png
│   │   │   ├── GT.png
│   │   │   ├── HN.png
│   │   │   ├── HT.png
│   │   │   ├── HU.png
│   │   │   ├── ID.png
│   │   │   ├── IE.png
│   │   │   ├── IL.png
│   │   │   ├── IN.png
│   │   │   ├── IQ.png
│   │   │   ├── IR.png
│   │   │   ├── IT.png
│   │   │   ├── JM.png
│   │   │   ├── JO.png
│   │   │   ├── JP.png
│   │   │   ├── KG.png
│   │   │   ├── KN.png
│   │   │   ├── KP.png
│   │   │   ├── KR.png
│   │   │   ├── KW.png
│   │   │   ├── KZ.png
│   │   │   ├── LA.png
│   │   │   ├── LB.png
│   │   │   ├── LC.png
│   │   │   ├── LS.png
│   │   │   ├── LU.png
│   │   │   ├── LV.png
│   │   │   ├── MG.png
│   │   │   ├── MK.png
│   │   │   ├── ML.png
│   │   │   ├── MM.png
│   │   │   ├── MT.png
│   │   │   ├── MX.png
│   │   │   ├── NA.png
│   │   │   ├── NE.png
│   │   │   ├── NG.png
│   │   │   ├── NI.png
│   │   │   ├── NL.png
│   │   │   ├── NO.png
│   │   │   ├── OM.png
│   │   │   ├── PA.png
│   │   │   ├── PE.png
│   │   │   ├── PG.png
│   │   │   ├── PK.png
│   │   │   ├── PL.png
│   │   │   ├── PT.png
│   │   │   ├── PY.png
│   │   │   ├── QA.png
│   │   │   ├── RO.png
│   │   │   ├── RU.png
│   │   │   ├── RW.png
│   │   │   ├── SA.png
│   │   │   ├── SE.png
│   │   │   ├── SG.png
│   │   │   ├── SL.png
│   │   │   ├── SN.png
│   │   │   ├── SO.png
│   │   │   ├── SV.png
│   │   │   ├── TD.png
│   │   │   ├── TJ.png
│   │   │   ├── TL.png
│   │   │   ├── TR.png
│   │   │   ├── TZ.png
│   │   │   ├── UA.png
│   │   │   ├── US.png
│   │   │   ├── VE.png
│   │   │   ├── VN.png
│   │   │   └── YE.png
│   │   ├── full-screen-image-1.jpg
│   │   ├── full-screen-image-2.jpg
│   │   ├── full-screen-image-3.jpg
│   │   ├── full-screen-image-4.jpg
│   │   ├── laravel.svg
│   │   ├── loading-bubbles.svg
│   │   ├── margot.jpg
│   │   ├── mask.png
│   │   ├── new_logo.png
│   │   ├── sidebar-1.jpg
│   │   ├── sidebar-2.jpg
│   │   ├── sidebar-3.jpg
│   │   ├── sidebar-4.jpg
│   │   ├── sidebar-5.jpg
│   │   └── tim_80x80.png
│   ├── index.php
│   ├── js
│   │   ├── core
│   │   │   ├── bootstrap.min.js
│   │   │   ├── jquery.3.2.1.min.js
│   │   │   └── popper.min.js
│   │   ├── demo.js
│   │   ├── light-bootstrap-dashboard.js
│   │   └── plugins
│   │       ├── bootstrap-datetimepicker.js
│   │       ├── bootstrap-notify.js
│   │       ├── bootstrap-selectpicker.js
│   │       ├── bootstrap-switch.js
│   │       ├── bootstrap-table.js
│   │       ├── bootstrap-tagsinput.js
│   │       ├── chartist.min.js
│   │       ├── fullcalendar.min.js
│   │       ├── jasny-bootstrap.min.js
│   │       ├── jquery.bootstrap-wizard.js
│   │       ├── jquery.dataTables.min.js
│   │       ├── jquery-jvectormap.js
│   │       ├── jquery.validate.min.js
│   │       ├── moment.min.js
│   │       ├── nouislider.js
│   │       ├── perfect-scrollbar.jquery.min.js
│   │       └── sweetalert2.min.js
│   ├── robots.txt
│   └── storage -> /home/updivision/Code/light-bootstrap-dashboard/storage/app/public
├── README.md
├── resources
│   ├── lang
│   │   └── en
│   │       ├── auth.php
│   │       ├── pagination.php
│   │       ├── passwords.php
│   │       └── validation.php
│   └── 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
│       ├── categories
│       │   ├── create.blade.php
│       │   ├── edit.blade.php
│       │   └── index.blade.php
│       ├── items
│       │   ├── create.blade.php
│       │   ├── edit.blade.php
│       │   └── index.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
│       │   ├── calendar.blade.php
│       │   ├── charts.blade.php
│       │   ├── components
│       │   │   ├── buttons.blade.php
│       │   │   ├── grid.blade.php
│       │   │   ├── icons.blade.php
│       │   │   ├── notifications.blade.php
│       │   │   ├── panels.blade.php
│       │   │   ├── sweet-alert.blade.php
│       │   │   └── typography.blade.php
│       │   ├── dashboard.blade.php
│       │   ├── forms
│       │   │   ├── extended-forms.blade.php
│       │   │   ├── regular-forms.blade.php
│       │   │   ├── validation-forms.blade.php
│       │   │   └── wizard.blade.php
│       │   ├── lock.blade.php
│       │   ├── maps
│       │   │   ├── fullscreen.blade.php
│       │   │   ├── google.blade.php
│       │   │   └── vector.blade.php
│       │   ├── sidebarstyle.blade.php
│       │   └── tables
│       │       ├── bootstrap.blade.php
│       │       ├── datatables.blade.php
│       │       ├── extended.blade.php
│       │       └── regular.blade.php
│       ├── profile
│       │   └── edit.blade.php
│       ├── roles
│       │   ├── create.blade.php
│       │   ├── edit.blade.php
│       │   └── index.blade.php
│       ├── tags
│       │   ├── create.blade.php
│       │   ├── edit.blade.php
│       │   └── index.blade.php
│       └── users
│           ├── create.blade.php
│           ├── edit.blade.php
│           └── index.blade.php
├── routes
│   ├── api.php
│   ├── channels.php
│   ├── console.php
│   └── web.php
├── server.php
├── storage
│   ├── app
│   │   └── public
│   │       ├── pictures
│   │       │   
│   │       └── profile
                                    

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.

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.

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->merge(['picture' => $request->photo ? $request->photo->store('profile', 'public') : null])
            ->except([$request->hasFile('photo') ? '' : 'picture'])
    );

    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()->withStatus(__('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'],
    ];
}
                                        
                                    

Role Management

The Pro theme allows you to add user roles. By default, the theme comes with Admin, Creator and Member roles. To access the role management example click the "Examples/Role Management" link in the left sidebar or add /role to the URL. Here you can add/edit new roles. Deletion is not allowed in this section.

To add a new role, click the "Add role" button. To edit an existing role, click the dotted menu (available on every table row) and then click "Edit". In both cases, you will be directed to a form which allows you to modify the name and description of a role.

The policy which authorizes the user to access the role management option is implemented in App\Policies\RolePolicy.php.

You can find this functionality in App\Http\RoleController.php.

Also, validation rules were added so you will know exactly what to input in the form fields (see App\Http\Requests\RoleRequest). Note that these validation rules also apply for the role edit option.

                                        
public function rules()
{
    return [
        'name' => [
            'required', 'min:3', Rule::unique((new Role)->getTable())->ignore($this->route()->role->id ?? null)
        ],
        'description' => [
            'nullable', 'min:5'
        ]
    ];
}
                                        
                                    

User Management

The theme comes with an out of the box user management option. To access this option ,click the "Examples/User Management" link in the left sidebar or add /user to the URL.

The first thing you will see is a list of existing users. You can add new ones by clicking the "Add user" button (above the table on the right). On the Add user page, you will find a form which allows you to fill out the user`s name, email, role and password. All pages are generated using blade templates:

                                        
<div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
    <label class="form-control-label" for="input-name">
        <i class="w3-xxlarge fa fa-user"></i>{{ __('Name') }}
    </label>
    <input type="text" name="name" id="input-name" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="{{ __('Name') }}" value="{{ old('name') }}" required autofocus>

    @include('alerts.feedback', ['field' => 'name'])
</div>
                                        
                                    

Validation rules were added to prevent errors in the form fields (see App\Http\Requests\UserRequest). Note that these validation rules also apply for the user edit option.

                                        
public function rules()
{
    return [
        'name' => [
            'required', 'min:3'
        ],
        'email' => [
            'required', 'email', Rule::unique((new User)->getTable())->ignore($this->route()->user->id ?? null)
        ],
        'role_id' => [
            'required', 'exists:'.(new Role)->getTable().',id'
        ],
        'password' => [
            $this->route()->user ? 'nullable' : 'required', 'confirmed', 'min:6'
        ]
    ];
}

/**
* Get the validation attributes that apply to the request.
*
* @return array
*/
public function attributes()
{
    return [
        'role_id' => 'role',
    ];
}
                                        
                                    

The policy which authorizes the user to access the user management pages is implemented in App\Policies\UserPolicy.php.

Once you add more users, the list will grow and for every user you will have edit and delete options (access these options by clicking the three dotted menu that appears at the end of every row).

All the sample code for the user management can be found in App\Http\Controllers\UserController. See store method example bellow:

                                        
public function store(UserRequest $request, User $model)
{
    $model->create($request->merge([
        'picture' => $request->photo ? $request->photo->store('profile', 'public') : null,
        'password' => Hash::make($request->get('password'))
    ])->all());

    return redirect()->route('user.index')->withStatus(__('User successfully created.'));
}
                                        
                                    

Tag Management

The Pro theme also comes with a tag management option. To access this example, click the "Examples/Tag Management" link in the left sidebar or add /tag to the URL.

In this section you can add and edit tags, but you can only delete them if they are not attached to any items. You can add new ones by clicking the "Add tag" button (above the table on the right). You will then be directed to a form which allows you to add new tags.

Although you can add in the form only the name and color of a tag, you can write your own migrations to extend this functionality.

                                        
public function destroy(Tag $tag)
{
    if (!$tag->items->isEmpty()) {
        return redirect()->route('tag.index')->withErrors(__('This tag has items attached and can\'t be deleted.'));
    }

    $tag->delete();

    return redirect()->route('tag.index')->withStatus(__('Tag successfully deleted.'));
}
                                        
                                    

The policy which authorizes the user to access tags management pages is implemented in App\Policies\TagPolicy.php.

Category Management

Out of the box you will have an example of category management (for the cases in which you are developing a blog or a shop). To access this example, click the "Examples/Category Management" link in the left sidebar or add /category to the URL. You can add and edit categories here, but you can only delete them if they are not attached to any items.

                                        
@if ($category->items->isEmpty() && auth()->user()->can('delete', $category))
<form class="d-inline-block" action="{{ route('category.destroy', $category->id) }}" method="POST">
    @method('delete')
    @csrf
    <a class="btn btn-link btn-danger " onclick="confirm('{{ __('Are you sure you want to delete this category?') }}') ? this.parentElement.submit() : ''">
    <i class="fa fa-times"> </i> </a></form>
@endif
                                        
                                    

The policy which authorizes the user on categories management pages is implemented in App\Policies\CategoryPolicy.php.

Item Management

Item management is the most advanced example included in the Pro theme, because every item has a picture, belongs to a category and has multiple tags. To access this example click the "Examples/Item Management" link in the left sidebar or add /item to the URL.

Here you can manage the items. A list of items will appear once you start adding them (to access the add page click "Add item"). On the add page, besides the Name and Description fields (which are present in most of the CRUD examples) you can see a category dropdown, which contains the categories you added, a file input and a tag multi select. If you did not add any categories or tags, please go to the corresponding sections (category management, tag management) and add some.

The code for saving a new item is a bit different than before (see snippet bellow):

                                        
public function store(ItemRequest $request, Item $model)
{
    $item = $model->create($request->merge([
        'picture' => $request->photo->store('pictures', 'public'),
        'show_on_homepage' => $request->show_on_homepage ? 1 : 0,
        'options' => $request->options ? $request->options : null,
        'date' => $request->date ? Carbon::parse($request->date)->format('Y-m-d') : null
    ])->all());

    $item->tags()->sync($request->get('tags'));

    return redirect()->route('item.index')->withStatus(__('Item successfully created.'));
}
                                        
                                    

Notice how the picture and tags are easily saved in the database and on the disk.

Similar to all the examples included in the theme, this one also has validation rules in place. Note that the picture is mandatory only on the item creation. On the edit page, if no new picture is added, the old picture will not be modified.

                                        
public function rules()
{
    return [
        'name' => [
            'required', 'min:3', Rule::unique((new Item)->getTable())->ignore($this->route()->item->id ?? null)
        ],
        'category_id' => [
            'required', 'exists:'.(new Category)->getTable().',id'
        ],
        'excerpt' => [
            'required', 'min:3'
        ],
        'description' => [
            'required',"min:3"
        ],
        'photo' => [
            $this->route()->item ? 'nullable' : 'required', 'image'
        ],
        'tags' => [
            'required'
        ],
        'tags.*' => [
            'exists:'.(new Tag)->getTable().',id'
        ],
        'status' => [
            'required',
            'in:published,draft,archive'
        ],
        'date' => [
            'required',
            'date_format:d-m-Y'
        ]
    ];
}
                                            
                                        

In the item management we have an observer (`app\Observers\ItemObserver`) example. This observer handles the deletion of the picture from the disk when the item is deleted or when the picture is changed via the edit form. The observer also removes the association between the item and the tags.

                                            
public function deleting(Item  $item)
{
    File::delete(storage_path("/app/public/{$item->picture}"));
    
    $item->tags()->detach();
}
                                        
                                    

The policy which authorizes the user on item management pages is implemented in App\Policies\ItemPolicy.php.

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


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

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