Light Bootstrap Dashboard Laravel

Laravel setup

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:

• Windows: https://updivision.com/blog/post/beginner-s-guide-to-setting-up-your-local-development-environment-on-windows
• Linux: https://howtoubuntu.org/how-to-install-lamp-on-ubuntu
• Mac: https://wpshout.com/quick-guides/how-to-install-mamp-on-your-mac

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

And Laravel: https://laravel.com/docs/8.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\LightBootstrapPreset\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:

• admin type - [email protected] with the password

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.

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.

Login

The user must autenthicate before using the management dashboard. The default credentials can be used:

• [email protected], with the password secret

For logging in, the user can press the Login button in the top navbar.

The App\Http\Controllers\LoginController handles the user's authentication.

If you input the wrong data when trying to authenticate, there are validation rules to check if the email and password are right and if the user has an account (see resources/views/auth/login.blade.php ).

                                                
        <div class="form-group">
            <label for="password" class="col-md-6 col-form-label">{{ __('Password') }}>/label>

            <div class="col-md-14">
                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" value="{{ old('password', 'secret') }}" required autocomplete="current-password">

                @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}>/strong>
                    </span>
                @enderror
            </div>
        </div>
                                                
                                            

Register

A new account can be created by a user with the help of the Create account button from the login page or the Register button from the top navabar. The user must provide the name, email and a password.

The App\Http\Controllers\RegisterController handles the user's registration.

                                                
        protected function create(array $data)
        {
            return User::create([
                'name' => $data['name'],
                'email' => $data['email'],
                'password' => Hash::make($data['password']),
            ]);
        }
                                                
                                            

The data introduced by the user is validated because the account needs a valid email address and the password and password confirmation to match.

Recover password

In the case of an user forgetting the credentials there is the possibility of resetting them. For resetting the password the user should use the Forgot password? button from the login page. The user must provide the email for the account and after that a link will be sent for resetting the password to the provided mail address.

                                                
        public function sendResetLinkEmail(Request $request)
        {
            $this->validateEmail($request);
        
            // We will send the password reset link to this user. Once we have attempted
            // to send the link, we will examine the response then see the message we
            // need to show to the user. Finally, we'll send out a proper response.
            $response = $this->broker()->sendResetLink(
                $this->credentials($request)
            );
        
            return $response == Password::RESET_LINK_SENT
                        ? $this->sendResetLinkResponse($request, $response)
                        : $this->sendResetLinkFailedResponse($request, $response);
        }
                                                
                                            

Also, the resources/views/auth/email and resources/views/auth/reset take care of resetting the password.

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:

Default Primary Info Success Warning Danger Neutral

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

Large Normal Small

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

Default Outline Fill + Round Outline + Round

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