Laravel 5.5 Frontend Preset for Boostrap 4

Note: Laravel 5.6 includes Bootstrap 4, this preset is only needed for Laravel <= Laravel 5.5 LTS, _(*1)

If you are upgrading a Laravel <= 5.5 application, remove this preset (laravelnews/laravel-twbs4) from your composer.json file. Laravel 5.6 includes Bootstrap 4, and this preset isn't necessary., _(*2)

, _(*3)

A Laravel frontend preset for Bootstrap 4, the latest version of Bootstrap., _(*4)

Current version is the stable release of ^4.0.0. To learn more about updating to the latest major release of Bootstrap, read the Migrating to v4 documentation., _(*5)

Installation

You can install this package via composer:, _(*6)

composer require laravelnews/laravel-twbs4

The package will automatically register it's service provider., _(*7)

Install the basic preset to only update the CSS and JavaScript files:, _(*8)

php artisan preset bootstrap4

Or if you want to install everything, including auth views:, _(*9)

php artisan preset bootstrap4-auth

Next, update NPM packages and build the CSS/JavaScript:, _(*10)

yarn && yarn dev

Or via NPM:, _(*11)

npm install && npm run dev

Important: Make sure you have a backup of your code. The presets update package.json, and replace views, CSS, and JavaScript., _(*12)

jQuery Slim

Bootstrap's download page includes jQuery slim. If you need $.ajax, effects, and deprecated methods, you can change the following line in resources/assets/js/boostrap.js to use the full jQuery installation:, _(*13)

window.$ = window.jQuery = require('jquery/dist/jquery.slim');

With full jQuery:, _(*14)

// Full jQuery
window.$ = window.jQuery = require('jquery');

Variables

The Bootstrap 4 presets include the same familiar resources/assets/scss/_variables.scss file, with some updated values to match Bootstrap 4 variable changes. This preset looks similar to the current 3.x version that ships with Laravel, but isn't identical., _(*15)

Here are the variables ported over thus far:, _(*16)

// Body
$body-bg: #fff;

// Borders
$laravel-border-color: darken($body-bg, 10%);
$list-group-border-color: $laravel-border-color;

$card-border-color: $laravel-border-color;

// Brands
$primary: #3097D1;
$info: #8eb4cb;
$success: #2ab27b;
$warning: #cbb956;
$danger: #bf5329;

// Typography
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: .875rem; // 14px
$line-height-base: 1.6;
$text-color: #636b6f;

// Inputs
$input-border-color: lighten($text-color, 40%);
$input-placeholder-color: lighten($text-color, 30%);