Using Bootstrap 4 with Laravel

In this post, you'll learn how to use Bootstrap 4 with a new (or existing) Laravel install. This post will guide you through how to use the latest version with your app, including the auth scaffolding.

Setting Up

I'm going to assume you already have your development environment (PHP, web server, etc...) figured out. If not, I recommend Valet (if you're on a mac) or Homestead otherwise. I'm going to also assume you have a current version of NodeJS and NPM installed globally on your machine too. If you have the ability to run and build assets for other laravel apps (via valet / homestead) you should be good to go. If you need help with this, leave comment below.

If you just want the source code, you can find it here

Create a new Laravel project

Let's create our laravel project (I prefer to use composer for this). Fill in yourproject with your desired folder name.

composer create-project laravel/laravel yourproject

Generate the auth scaffolding

Now we'll generate the bootstrap-based auth scaffolding to get something to work with.

php artisan make:auth

Now if you open your new laravel project in your browser you should see the Login / Register links

Install Bootstrap 4 and Update References

Now that we've got a working laravel install with some bootstrap markup on a few pages (Login, Register, etc...), we'll install the new version of Bootstrap. Currently it's at v4.0.0-alpha.6, but I'll try to keep this article updated when new versions of bootstrap or laravel come out.

First, change the "bootstrap-sass" line in your package.json file to the below:

"bootstrap": "^4.0.0-alpha.6",

Next we'll pull in the latest assets with npm

npm install

Now we need to update the imports in our resources/assets/sass/app.scss file to reference the new Bootstrap. Change this path in your file, mine looks like this:

// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

// Variables
@import "variables";

// Bootstrap (this is the path we changed)
@import "node_modules/bootstrap/scss/bootstrap";

Now in resources/assets/sass/_variables.scss we need to remove this line so it doesn't cause compilation errors with the rem units in Bootstrap 4:

$font-size-base: 14px;

Finally, we need to update the reference in resources/assets/js/bootstrap.js

// Change this line
require('bootstrap-sass');
// To this 
require('bootstrap');

Update the Markup

You can now build the assets with npm run dev, but if you do that and check our app in your browser on a page like /login, you'll notice it still looks messed up! We just need to change some markup in the authentication views laravel generated to match Bootstrap v4. It's not within the scope of this article to list everything that has changed from Bootstrap 3 to version 4, but here's an overview of what you need to do:

  • For the lazy, check out this diff on github to see everything you'll need to change.
  • Update resources/assets/views/layouts/app.blade.php to the navbar markup that Bootstrap 4 uses.
  • Change all the .panel classes to the equivalent .card based classes in all of the authentication views (login, signup, etc...). So .panel becomes .card, .panel-heading becomes .card-header, and .panel-body becomes .card-block
  • Add the .justify-content-center class to the .row divs in the auth view files

Now when you load the authentication pages in your browser, you should see things looking much better. You are now ready to rock with Laravel and Bootstrap 4! If you get stuck, or have any suggestions about how to improve this article, leave a comment below.


Previous Post

Blog Comments powered by Disqus.