README

Light Bootstrap Dashboard by Creative Tim, packaged as Blade layouts, partials and components for Laravel 5.7 to 12.

Version Matrix

Laravel Version	Library Version
5.x-6.x	1.x
7.x	2.x
8.x	3.x
9.x	4.x
10.x	5.x
11.x-12.x	6.x
11.x-12.x	7.x

Install

Via Composer:

composer require renderbit/light-bootstrap-dashboard

The service provider (RenderbitTechnologies\LightBootstrapDashboard\LightBootstrapDashboardServiceProvider) is registered through Laravel package auto-discovery. The package also pulls in lavary/laravel-menu, which the sidebar, header and footer menus are built with.

Publish

The CSS, JS, fonts and images have to be published to public/vendor/lbd before the layouts render correctly:

php artisan vendor:publish --provider="RenderbitTechnologies\LightBootstrapDashboard\LightBootstrapDashboardServiceProvider" --tag=public

Optionally, publish the config files and the views:

# config/lbd.php and config/sidebar-menu.php
php artisan vendor:publish --provider="RenderbitTechnologies\LightBootstrapDashboard\LightBootstrapDashboardServiceProvider" --tag=config

# resources/views/vendor/lbd
php artisan vendor:publish --provider="RenderbitTechnologies\LightBootstrapDashboard\LightBootstrapDashboardServiceProvider" --tag=views

Published views in resources/views/vendor/lbd take precedence over the package's own, so you can edit any layout or partial there.

Re-run the --tag=public command (with --force) after upgrading the package to pick up new assets.

Configuration

`config/lbd.php`

Key	`.env` variable	Default	Description
`google_maps_api_key`	`GOOGLE_MAPS_API_KEY`	`null`	API key for the Google Maps JavaScript API. The Maps script is only loaded when this is set.
`google_analytics_key`	`GOOGLE_ANALYTICS_KEY`	`null`	Google Analytics (GA4) measurement ID, e.g. `G-XXXXXXXXXX`. The `gtag.js` snippet is only output when this is set.
`load_demo_content`	`LOAD_LBD_DEMO`	`false`	Registers the demo routes (under `/lbd`, with the `web` middleware group) and the demo menus, and fills the layout chrome with the template's placeholder content (sidebar user, navbar search and dropdowns, the full-page navbar menu, the "fixed plugin" settings panel, the `sidebar-5.jpg` background).
`home_url`	`LBD_HOME_URL`	`null`	Where the sidebar logo and the navbar brand link. When empty, they link to the demo dashboard if demo content is on, otherwise to `url('/')`.
`logo_mini`	—	First two letters of `app.name`, uppercased	Text shown as the sidebar logo when the sidebar is minimized.
`logo_full`	—	`app.name`	Text shown as the sidebar logo.
`sidebar_color`	—	`orange`	Sidebar `data-color`: `black`, `azure`, `blue`, `purple`, `green`, `orange` or `red`. The sidebar minimize button follows this colour.
`sidebar_image`	—	`null`	Sidebar background image, as a path relative to `public/` (e.g. `vendor/lbd/img/sidebar-5.jpg`). `null` means no image (the demo uses `sidebar-5.jpg`).
`footer_logo`	—	`Renderbit Technologies`	Name in the footer's "made with ♥ by ..." credit. Set to `null` or `''` to hide the credit.
`footer_link`	—	`https://renderbit.com`	Link for the footer credit.

The footer copyright line uses your app's app.name and app.url, and the page <title> is @yield('title') | {{ config('app.name') }}.

`config/sidebar-menu.php`

Its keys are lavary/laravel-menu settings per menu name, and they are layered over laravel-menu.settings when the package boots, so a published copy takes effect. By default it only sets activate_parents to false for sidebar_main_menu. See the lavary/laravel-menu configuration docs for the available settings.

Demo pages

To browse every page of the theme, set LOAD_LBD_DEMO=true in .env and visit /lbd/dashboard. The demo routes are named lbd.* (for example lbd.dashboard, lbd.components.buttons, lbd.pages.login); run php artisan route:list --name=lbd to see them all. The demo views (lbd::dashboard, lbd::charts, lbd::login, ...) are good references for the markup each component needs.

Usage

Layouts

There are two layouts:

lbd::layout: the dashboard layout, with sidebar, top navbar and footer.
lbd::layout-full: a full-page layout without the sidebar, used for login, register and lock screen pages.

@extends('lbd::layout')

@section('title', 'Orders')

@push('styles')
    <link href="{{ asset('css/orders.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                ...
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function () {
            // jQuery, Popper and Bootstrap are loaded at this point
        });
    </script>
@endpush

Sections and stacks available in both layouts:

Name	Type	Description
`title`	section	Page title, used in `<title>` and (in `lbd::layout`) in the navbar.
`content`	section	The page body.
`meta`	stack	Extra `<meta>` / `<link>` tags in `<head>`, before the theme CSS.
`styles`	stack	Extra `<head>` tags, output after the theme CSS.
`scripts`	stack	Extra scripts, output after jQuery, Popper, Bootstrap and `light-bootstrap-dashboard.js`.

lbd::layout-full also yields:

Name	Type	Description
`background_color`	section	Filter colour of the full-page background: `black`, `blue`, `purple`, `green`, `orange`, `red` or `rose`.
`background_image`	section	URL of the full-page background image.

@extends('lbd::layout-full')

@section('title', 'Login')
@section('background_color', 'black')
@section('background_image', asset('vendor/lbd/img/full-screen-image-2.jpg'))

@section('content')
    ...
@endsection

Use `@push`, not `@section`, for styles and scripts

inc/head and inc/scripts wrap the theme's CSS and JS in @section('styles') ... @show and @section('scripts') ... @show. If a page defines @section('scripts') (or @section('styles')) itself, it replaces that whole block, which removes jQuery, Popper, Bootstrap and the theme JS (or CSS). Use @push('scripts') / @push('styles') to add to the page instead.

If you do need to override the section, call @parent to keep the theme's assets:

@section('scripts')
    @parent
    <script src="{{ asset('js/extra.js') }}"></script>
@endsection

Theme plugins

The layouts only load jQuery, Popper, Bootstrap and light-bootstrap-dashboard.js (plus the Google Maps script when lbd.google_maps_api_key is set). Push the plugins a page uses onto the scripts stack, before the code that uses them:

@push('scripts')
    <script src="{{ asset('vendor/lbd/js/plugins/chartist.min.js') }}"></script>
    <script>
        $(function () {
            new Chartist.Line('#chart', { labels: ['Mon', 'Tue'], series: [[5, 3]] });
        });
    </script>
@endpush

The bundled plugins are in public/vendor/lbd/js/plugins after publishing: bootstrap-datetimepicker.js, bootstrap-notify.js, bootstrap-selectpicker.js, bootstrap-switch.js, bootstrap-table.js, chartist.min.js, fullcalendar.min.js, jquery-jvectormap.js, jquery.bootstrap-wizard.js, jquery.dataTables.min.js, jquery.validate.min.js, moment.min.js, nouislider.js, sweetalert2.min.js and tom-select.complete.min.js (Tom Select also needs vendor/lbd/css/tom-select.bootstrap4.min.css, pushed onto styles). The demo views (src/resources/views/*.blade.php) show which files each page needs.

Layout chrome

The sidebar user block and the navbar menus are empty by default. Fill them from your own views:

@extends('lbd::layout')

@section('sidebar-user')
<div class="user">
    <div class="info">
        <a href="{{ route('profile') }}"><span>{{ auth()->user()->name }}</span></a>
    </div>
</div>
@endsection

@push('navbar-right')
<li class="nav-item">
    <a class="nav-link" href="{{ route('logout') }}">Log out</a>
</li>
@endpush

sidebar-user (section): the user block below the sidebar logo (lbd::layout).
navbar-left / navbar-right (stacks): <li> items rendered in the left and right navbar lists (lbd::layout).
navbar-full (stack): <li> items rendered in the navbar of lbd::layout-full (used by the login, register and lock screen pages).
lbd.sidebar_color and lbd.sidebar_image config keys set the sidebar colour and background image.
lbd.home_url config key (LBD_HOME_URL) sets where the sidebar logo and navbar brand link; it defaults to the demo dashboard when demo content is enabled and to url('/') otherwise.

The template's placeholder user, search form, dropdowns and notifications are only shown when lbd.load_demo_content is enabled.

Components

`lbd::inc.box`

A card with an optional header and footer.

@component('lbd::inc.box')
    @slot('title', 'Email Statistics')
    @slot('subtitle', 'Last Campaign Performance')

    @slot('body')
        <div id="chartEmail" class="ct-chart"></div>
    @endslot

    @slot('footer')
        <div class="stats"><i class="fa fa-clock-o"></i> Campaign sent 2 days ago</div>
    @endslot
@endcomponent

Slot	Required	Description
`body`	yes	Card body.
`title`	no	Header title. The header is only rendered when this is set.
`subtitle`	no	Header subtitle (needs `title`).
`footer`	no	Card footer.
`class_list`	no	Extra classes on `.card`.
`body_class_list`	no	Extra classes on `.card-body`.

`lbd::inc.card`

A stats card with an icon, a number and a footer line.

@component('lbd::inc.card')
    @slot('title', '$ 1,345')
    @slot('category', 'Revenue')
    @slot('icon', 'nc-icon nc-light-3 text-success')
    @slot('footer_icon', 'fa fa-calendar-o')
    @slot('footer', 'Last day')
@endcomponent

Slot	Required	Description
`title`	yes	The big number or value.
`category`	yes	Label shown above the value.
`icon`	yes	Icon classes, e.g. `nc-icon nc-chart text-warning`.
`footer_icon`	yes	Footer icon classes, e.g. `fa fa-refresh`.
`footer`	yes	Footer text.
`class_list`	no	Classes on `.card`; defaults to `card-stats`.

Menus

The layouts render menus built with lavary/laravel-menu. Each menu is only rendered if it exists, so define the ones you need:

Menu name	Where it is rendered
`sidebar_main_menu`	Main sidebar navigation (`lbd::layout`). Supports one level of nested items, shown as collapsible groups.
`sidebar_user_menu`	Dropdown under the demo's sidebar user block. Only rendered when `lbd.load_demo_content` is on; otherwise render it yourself in the `sidebar-user` section (see below).
`site_header_menu`	Navbar links in `lbd::layout-full`. Only rendered when `lbd.load_demo_content` is on; otherwise push your own `<li>` items onto the `navbar-full` stack.
`site_footer_menu`	Footer links (both layouts).

Define them before the view renders, for example in a middleware applied to your dashboard routes:

<?php

namespace App\Http\Middleware;

use Closure;
use Lavary\Menu\Facade as Menu;

class BuildDashboardMenus
{
    public function handle($request, Closure $next)
    {
        Menu::make('sidebar_main_menu', function ($menu) {
            $menu->add('Dashboard', ['route' => 'dashboard'])
                ->before('<i class="nc-icon nc-chart-pie-35"></i>');

            // A parent item needs an "#id" href: it is used as the id of the collapsible group.
            $orders = $menu->add('Orders')->before('<i class="nc-icon nc-cart-simple"></i>');
            $orders->link->href('#ordersMenu');

            $orders->add('<span class="sidebar-normal">All orders</span>', ['route' => 'orders.index'])
                ->before('<span class="sidebar-mini">AO</span>');
            $orders->add('<span class="sidebar-normal">New order</span>', ['route' => 'orders.create'])
                ->before('<span class="sidebar-mini">NO</span>');
        });

        Menu::make('sidebar_user_menu', function ($menu) {
            $menu->add('')
                ->prepend('<span class="sidebar-mini">MP</span>')
                ->append('<span class="sidebar-normal">My Profile</span>')
                ->link->href(route('profile'));
        });

        return $next($request);
    }
}

Outside demo mode the layout doesn't render sidebar_user_menu for you. Output it from your sidebar-user section:

@section('sidebar-user')
<div class="user">
    <div class="info">
        <a data-toggle="collapse" href="#userMenu" class="collapsed">
            <span>{{ auth()->user()->name }} <b class="caret"></b></span>
        </a>
        <div class="collapse" id="userMenu">
            {!! Menu::get('sidebar_user_menu')->asUl(['class' => 'nav']) !!}
        </div>
    </div>
</div>
@endsection

The demo menus in src/Controllers/LightBootstrapDashboardController.php (setupMenus()) show more complete examples.

Change log

Please see CHANGELOG for more information on what has changed recently.

Testing

The test suite runs against the package with Orchestra Testbench.

composer test         # run the PHPUnit suite
composer check-style  # check the sources against PSR-2
composer fix-style    # fix what can be fixed automatically

Contributing

Please see CONTRIBUTING and CODE_OF_CONDUCT for details.

Security

If you discover any security related issues, please email contact@renderbit.com instead of using the issue tracker.

Credits

Creative Tim for the Light Bootstrap Dashboard theme
Renderbit Technologies
All Contributors

License

The MIT License (MIT). Please see License File for more information.

renderbit / light-bootstrap-dashboard

Package info

Security

Statistics

README

Version Matrix

Install

Publish

Configuration

`config/lbd.php`

`config/sidebar-menu.php`

Demo pages

Usage

Layouts

Use `@push`, not `@section`, for styles and scripts

Theme plugins

Layout chrome

Components

`lbd::inc.box`

`lbd::inc.card`

Menus

Change log

Testing

Contributing

Security

Credits

License

renderbit / light-bootstrap-dashboard

Package info

Security

Statistics

README

Version Matrix

Install

Publish

Configuration

config/lbd.php

config/sidebar-menu.php

Demo pages

Usage

Layouts

Use @push, not @section, for styles and scripts

Theme plugins

Layout chrome

Components

lbd::inc.box

lbd::inc.card

Menus

Change log

Testing

Contributing

Security

Credits

License

`config/lbd.php`

`config/sidebar-menu.php`

Use `@push`, not `@section`, for styles and scripts

`lbd::inc.box`

`lbd::inc.card`