Laravel – My Journey – Part 5 – Bootstrap 4

INTEGRATING BOOTSTRAP 4

Surprising, I have more to say about Laravel. However, this time I’m going to talk a bit about integrating the Bootstrap framework into my Shopping List application.

Those of you who have slavishly followed my ineptitude from it origins in Part One of this series will know that my fledgling application has reached a point where we actually have to present some content to the user. Part 4 briefly touched upon Laravel’s Blade templating engine, and how it can be used to take data passed to it from a controller and return it to the user. Rather excitingly, I am now going to look at making that data look nice. Step forward Bootstrap 4 (beta … beta 2) …

Previous articles in this series:
Important Note/Disclaimer
This is not a tutorial, nor an example of best practice. The techniques described in this article are not to be taken as efficient or secure. At the time of writing, I am a relative newcomer to Laravel, object-oriented programming, and the MVC paradigm. I won't be explaining every detail. I don't know all the theory. I'll probably get stuff to work and not know how I did it. I'll probably write things that are clearly untrue or, at best, inaccurate. This is me just finding my way ...

Anyone that knows anything about Laravel is already aware that the Bootstrap framework is included  (duh … obvs!), so why would I need to write an article about how to integrate it with Laravel?

Web technologies montage

As a relative newcomer to Laravel, Bootstrap, SASS, Less and the raft of modern web development accoutrement, there is an awful lot to learn. Having had a long break from web development (which I started in the late 1990s and left in the early 2000s) and only having recently returned to it, I wanted to concentrate on just a couple of the (to me) new development technologies and techniques.

So while I sort of understand how Laravel Mix compiles and integrates the CSS and Javascript assets for a Laravel application, I don’t, at this stage, want to be bothered with it. I want to concentrate on learning something about the core of Laravel; I’ll simply plug in Bootstrap to make what I’m doing looking vaguely acceptable, aesthetics-wise.

Bootstrap Logo

I have a Blade master template (resources/views/layouts/app.blade.php) on which all of the other pages of my application are based. This provides a single point from which to manage the elements  common to every page of my Shopping List application:

  • Doctype declaration
  • Meta information
  • CSS styles
  • Navigation
  • Flash messaging placeholder
  • Content placeholder
  • Javascript scripts

All the other pages of my application then simply make use of (or extend) this master template using @extends('layouts.app') Blade directive. Page content is injected into the content placeholder of the master template (@yield('content')) via the @section('content') directive.

So a skeleton page might look like:

@extends('layouts.app')

@section('content')

    // Page content here

@endsection

My master template file is based on the standard  resources/views/layouts/app.blade.php file that is generated from Artisan command that generates the Laravel user authentication scaffolding:

$ php artisan make:auth

Here is what the login page looks like with a fresh installation of Laravel 5.5. and the user authentication master template in place:

Bootstrap 3 Login
Bootstrap 3 Login Screen

I have modified the template to include elements from the Bootstrap Starter Template to make use of the latest beta version of the Bootstrap framework.

In the head portion of the page, I have included links to the following files via content delivery networks:

<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

This gives me access to Bootstrap CSS styles. The second stylesheet pulls in the Font Awesome CSS styles. I use Font Awesome icons throughout my Shopping List application.

The other area we are interested in is the Javascript files. Here are the scripts that I pull in towards the end of the master template:

<!-- Scripts -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

This provides access to jQuery, Popper and Bootstrap Javascript resources throughout my application.

The inclusion of these CSS and Javascript resources alone is not enough to make the front-end of my application look the way I’d like. Laravel 5.5 uses Bootstrap 3.3.7 and the user authentication scaffolding files use Bootstrap 3 page elements, some of which have been deprecated in the latest version of the framework.

This is what the login screen looks like now I’ve added the updated Bootstrap 4 styles:

Bootstrap 4 Login Screen (Before)

Clearly some work is required.

All of Laravel’s user authentication-related pages (login, register, and password) use the Bootstrap panel class (which is superseded by the card class in Bootstrap 4). For example, the login page uses the following code (excerpt):

<div class="panel panel-default">
    <div class="panel-heading">Login</div>
        <div class="panel-body">

            // Login form

        </div>
    </div>
</div>

And now using the card class:

<div class="card">
    <h5 class="card-header">Login</h5>
        <div class="card-body">

            // Login form

        </div>
</div>

So with that updated, some judicious reworking of the nav bar elements (referring to the documentation to check for changes), the use of some Font Awesome icons, and a little code tidying and commenting, this is the new version of the login page:

Bootstrap 4 Login - After
Bootstrap 4 Login Screen (After)

Similar changes are made to all of the Blade files within the resources/views/auth folder.

Bootstrap 4 Register Screen
Bootstrap 4 Register Screen
Bootstrap 4 Reset Password Screen
Bootstrap 4 Reset Password Screen
Bootstrap 4 Reset Password Screen
Bootstrap 4 Reset Password Screen

If you would like to see the complete master template, it’s available on Github.

Leave a Reply