INTEGRATING BOOTSTRAP 4
Surprisingly, 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:
|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?
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.
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
- Flash messaging placeholder
- Content placeholder
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
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:
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.
<!-- 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 is what the login screen looks like now I’ve added the updated Bootstrap 4 styles:
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
<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:
Similar changes are made to all of the Blade files within the
If you would like to see the complete master template, it’s available on Github.