Bootstrap 4 Beta in Laravel

3 minute read

August 18, 2017

I have long been awaiting the release of Bootstrap 4, and since the first v4 Beta came out last week I'm excited to start using it for big projects now that it is more stable.

Installing Dependencies

Require the new bootstrap version:

  • NPM: npm install bootstrap@4.0.0-beta
  • Yarn: yarn add bootstrap@4.0.0-beta

If you have been using bootstrap-sass you don't have to remove it as a dependency, however, if it isn't necessary for your app (i.e I still need it for a backend admin theme) you probably should remove it.

Require popper.js for tooltips and popovers

  • NPM: npm install popper.js
  • Yarn: yarn add popper.js

Update jQuery

I updated my jQuery version to ^3.2.1 instead of ^3.1.1, thought I don't believe this was absolutely necessary as v4 supports

Updating Styles

Update import

In your main application scss change the bootstrap import line to:

@import "node_modules/bootstrap/scss/bootstrap";

Check variables

Next double check the variables in your _variables.scss file and make sure that they exist in the new version's variables file or are using the correct unit.

For example, Laravel's default _variables.scss file defines $font-size-base: 14px;. Keeping this variable will mess up a lot of calculations in v4 as pixels have been swapped for rems and ems where appropriate to make responsive typography and component sizing even easier. To get your styles to compile either remove the $font-size-base variable or change it to a rem unit.

A gotcha I found was when trying to update the $brand-primary color. Is that you need to copy the entire $theme-colors map with all relevant color variables to your own _variables.scss file in order to modify any or all brand colors.

For example the default laravel colors:

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

Will need to become:

// Laravel Brand Colors
$brand-primary: #3097D1;
$brand-info: #8eb4cb;
$brand-success: #2ab27b;
$brand-warning: #cbb956;
$brand-danger: #bf5329;

// Needed default variables
$gray-100: #f8f9fa;
$gray-600: #868e96;
$gray-800: #343a40;

$theme-colors: (
  primary: $brand-primary,
  secondary: $gray-600,
  success: $brand-success,
  info: $brand-info,
  warning: $brand-warning,
  danger: $brand-danger,
  light: $gray-100,
  dark: $gray-800
);

However, when the v4-dev branch gets merged into the main release it will be possible to only define the specific colors you wish to override.

// Laravel Brand Colors
$brand-primary: #3097D1;
$brand-info: #8eb4cb;
$brand-success: #2ab27b;
$brand-warning: #cbb956;
$brand-danger: #bf5329;

$theme-colors: (
  primary: $brand-primary,
  success: $brand-success,
  info: $brand-info,
  warning: $brand-warning,
  danger: $brand-danger,
);

Updating Scripts

In your resources\js\bootstrap.js file alter the jQuery/Bootstrap try catch block.

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('popper.js').default;
    require('bootstrap');
} catch (e) {}

Updating views

After running yarn run dev or npm run dev to compile your assets, going to the login page presents you with a mess:

Messy login form

Lets fix that by updating the views to use the v4 styles.

Looking for more?

WIP: Laracon 2018

Laracon was this past week and it was amazing! Last night I tweeted this out:

I don't know where to begin, or how to fit everything I'm feeling into a tweet, but...

Jul 27, 2018

2 minute read

My Work Spotify Playlists

Here's a list of playlists I rotate through when I need get down to business.

  • Deep Work created by Chris Gmyr
  • Deep House Relax created by Spotify
  • mint...

May 14, 2018

1 minute read