Laravel 5.5 Frontend Preset for Boostrap 4

A Laravel frontend preset for Bootstrap 4, the latest version of Bootstrap.

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.

Installation

Note: Laravel 5.6 includes Bootstrap 4, this preset is for Laravel 5.5 LTS

You can install this package via composer:

composer require laravelnews/laravel-twbs4

The package will automatically register it's service provider.

Install the basic preset to only update the CSS and JavaScript files:

php artisan preset bootstrap4

Or if you want to install everything, including auth views:

php artisan preset bootstrap4-auth

Next, update NPM packages and build the CSS/JavaScript:

yarn && yarn dev

Or via NPM:

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.

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:

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

With full jQuery:

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

Here are the variables ported over thus far:

// 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%);