Laravel bootstrap components

Since all components have been created in the Template Engine Blade, it is no longer necessary to edit completly HTML of component of Bootstrap. This saves a lot of time in development. If you still want to change the component, you only have to do this in one file and not in the whole project. All changes are automatically transferred throughout the project. Bootstrap updates will no longer be a problem for you. All new features are automatically updated. You just have to install the latest version of Lbc and your project is up to date.

Convince yourself and look here: Examples

Help us to keep this project alive

Just a donation of $5 will enable LBC to continue its successful development and improvement in the future. Did LBC help you with your project and give you $5 worth of time? Then please take a short moment and give something back. Thanks a lot!

Small characters, big effect

<x-input
  name="email"
  type="email"
  placeholder="default"
  help="Input information text."
  required
  :label="[
    'class' => 'custom-label-class',
    'text' => 'Email Address',
  ]"
  :grid="['col-sm-3', 'col-sm-9']"
/>
            
=
<div class="form-group form-row">
  <label class="col-sm-3 custom-label-class" for="input-email">
    Email Address
  </label>

  <div class="col-sm-9">
    <input class="form-control is-valid" type="email" name="email" placeholder="default" required="required" id="input-email">
    <small id="help-email" class="form-text text-muted">
      Input information text.
    </small>

    // The server validation of Laravel is integrated
    // in the components with the standard bootstrap markup:
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
</div>
        

Install

Compatible with Laravel 5.5 - 8.x

  1. Unzip the package
  2. Paste all folders and files in your Laravel root folder
    app/Lbc and resources/views/lbc.
  3. Install following composer and npm packages.
    composer require intervention/image
    composer require jenssegers/agent
    npm i bootstrap@4.5.2
    npm i jquery@3.4.1
    npm i popper.js
    npm i vanilla-lazyload
    npm i prismjs
  4. Add the following lines in your resources/sass/app.scss.
    // Lbc only
    @import    '../views/lbc/assets/sass/app';
    
    // Lbc with theme liara (if you activate theme liara)
    // @import    '../views/lbc/assets/sass/app-with-theme-liara';
    
  1. Add the following lines in your resources/js/app.js.
    // Lbc only
    require('../views/lbc/assets/js/app')
    
    // Lbc with theme liara (if you activate theme liara)
    // require('../views/lbc/assets/js/app-with-theme-liara')
    
  2. Add the following lines in your routes/web.php.
    // Lbc basics
    App\Lbc\LaravelBootstrapComponents::init();
    
    // abc.com/lbc if you want to have the docs for it
    App\Lbc\LaravelBootstrapComponents::initDocs();
    
    // Lbc theme liara (abc.com/liara)
    // App\Lbc\LaravelBootstrapComponents::initThemeLiara();
  3. Run npm run production and finish

Package

  • Regular updates
  • E-Mail Support
  • Theme Liara
  • Bootstrap component in the Laravel-Template-Engine Blade
  • Many more utilities css classes
  • Documentation
  • Template-Examples
  • Lazyload for images (vanilla-lazyload)
  • Mobile detect (jenssegers/agent)
  • Image-Resize Tool (Intervention Image)

Thank you for your attention

Download LBC