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.
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:
Next we'll pull in the latest assets with npm
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";
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:
Finally, we need to update the reference in
// 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.
resources/assets/views/layouts/app.blade.phpto the navbar markup that Bootstrap 4 uses.
- Change all the
.panelclasses to the equivalent
.cardbased classes in all of the authentication views (login, signup, etc...). So
- Add the
.justify-content-centerclass to the
.rowdivs 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.