# Implementing a Master Template and Bootstrap in Laravel 8

DevFeed: [Implementing a Master Template and Bootstrap in Laravel 8](<https://devfeed.tech/articles/implementing-a-master-template-and-bootstrap-in-laravel-8-28187.md>)

Original publisher: [Read original article](<http://fuzzyblog.io/blog/laravel/2021/06/10/implementing-a-master-template-in-laravel-8.html>)

Author: Fuzzygroup

Published: 2021-06-10T14:19:00Z

Content type: tutorial

Language: en

Sources: [Scott Johnson](<https://devfeed.tech/sources/scott-johnson.md>)

Topics: [Laravel](<https://devfeed.tech/topics/laravel.md>), [Bootstrap](<https://devfeed.tech/topics/bootstrap.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Rails](<https://devfeed.tech/topics/rails.md>)

Tags: [bootstrap](<https://devfeed.tech/tags/bootstrap.md>), [css](<https://devfeed.tech/tags/css.md>), [getting-started](<https://devfeed.tech/tags/getting-started.md>), [html](<https://devfeed.tech/tags/html.md>), [laravel](<https://devfeed.tech/tags/laravel.md>), [php](<https://devfeed.tech/tags/php.md>), [route](<https://devfeed.tech/tags/route.md>), [structure](<https://devfeed.tech/tags/structure.md>), [testing](<https://devfeed.tech/tags/testing.md>), [yield](<https://devfeed.tech/tags/yield.md>)

## AI overview

A tutorial for Laravel 8 that explains how to create a reusable master Blade layout, use yield directives for page sections, add Bootstrap CSS and JavaScript, apply the layout to views, define an About route, and test the result.

## Source excerpt

This blog post continues from my Hello World tutorial and adds a master layout that you can use to add a consistent HTML structure to all pages. This is very similar, in a Rails context, to application.html.erb. Step 1: Create a layouts Directory In your application directory, start my creating the directory: mkdir resources/views/layouts Step 2: Create a master.blade.php Layout In your application directory, create the layout file: touch resources/views/layouts/master.blade.php Step 3: Add the HTML Boilerplate Start by adding to the master.blade.php file, your basic HTML stuff: <html> <head> <title> </title> </head> <body> </body> </html> Step 4: Add Yield Directives Just as in Rails, Laravel uses a yield directive during template processing to indicate where things go. Here is the HTML boilerplate marked up using yield directives: <html> <head> <title> @yield('title') </title> </head> <body> @yield('content') </body> </html> These yield statements indicate that two named sections of stuff, title and content, will be inserted at their respective locations. Adding Bootstrap Given that we have a master template, we can also use it to add Bootstrap to our Hello World app. Go to the Get Bootstrap site, click Getting Started, and copy the main CSS url. And add it below as follows: <html> <head> <title> @yield('title') </title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> @yield('content') </body> </html> Now we need to add the JavaScript so scroll down in the above Get Boostrap page and copy the JavaScript script tag. And add it below as follows: <html> <head> <title> @yield('title') </title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anon