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

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

  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 riverskies/laravel-mobile-detect
    npm i bootstrap@4.4.1
    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.
    // Bootstrap
    @import  '~bootstrap/scss/bootstrap';
    // LBC
    @import  '../views/lbc/assets/sass/app';
    
  1. Add the following lines in resources/js/app.js.
    try {
      window.Popper = require('popper.js').default;
      window.$ = window.jQuery = require('jquery');
    
      require('bootstrap');
    } catch (e) {}
    
    require('../views/lbc/assets/js/app')
    
  2. Add the following lines to boot() function in app/Providers/AppServiceProvider.php.
    // LBC basics
    \App\Lbc\LaravelBootstrapComponents::init();
    // abc.com/lbc If you want to have the docs for it
    \App\Lbc\LaravelBootstrapComponents::initDocs();
  3. Run npm run production and finish

Package

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

Thank you for your attention

Buy now