# Starters guide to Laravel templates, with Bootstrap
In this guide I will be guiding you through the basic concepts of defining a base layout in Laravel using Blade templates. I will share with you how I after years of working with Laravel choose to structure my layouts. We will be creating our example using Bootstrap, so you have something to continue with after, if you prefer other frameworks such as Tailwind, you should be able to do so, but already knowing the CSS framework would be beneficial then.
I will cover the basic use of Laravel Blade with Bootstrap for a signed in user, you should get the idea afterwards if you wish to create a layout for the landing page as well.
This article is written with Laravel 7 in mind.
## Setup
After you setup your initial Laravel you should use Laravel/UI to install Bootstrap:
1. Install Laravel/UI: `composer require laravel/ui`
2. Prepare Bootstrap: `php artisan ui bootstrap`
3. Install assets: `npm install`
## Structure and core layout
### Worth noting about Laravel Blade
#### Section names
You can only use a section name once in a structure, this means you are going to have a conflict if you 2 templates uses the same section name:
```html
// Template 1
@yield('content')
// Template2
@extends('Template1')
@section('content')
@yield('content')
@endsection
```
*** This is prone to errors ! ***
#### Ending sections
A section can be ended by either `@stop` or `@endsection`. Which you choose is up to you, but in my opinion `@endsection` gives you a more readable template.
### Structure
I like to keep my structure as closely related to the one suggested from Laravel, this ensures it's easier for me in the future to go back and modify the code, but also easier for participants to understand my code. Therefor all Blade templates are stored in `/resources/views`.
Layout specific templates will be put inside the subdirectory `layout`. Within that I like to keep a subfolder called `parts`, this contains menu, footer, header and other commonly used parts that should be accessible through the various layout templates.
#### Base
Within `layout` create a new file called `base.blade.php`. This is the base template for all templates – but only extended by layout templates.
```html
My site
@yield('page')
```
#### Blank
Next create a file in `layout` called `blank.blade.php`, this will be the most basic layout. It may seem redundant not just to extend base, but this way we can keep a streamlined architecture and sometimes you might want to force ie a footer to even the minimal layout.
```html
@extends('layout.base')
@section('page')
@yield('content')
@endsection
```
Also, we ensured the section you later refer to is always `content`.
#### App
For the signed in user the there should be a layout that represents the app view. This will include:
* Navigation
* Header
* App content area
```html
@extends('layout.base')
@section('page')
@include('layout.parts.navbar')
@yield('content')
@endsection
```
#### `@include` and `@yield`
We have worked with 2 different ways to work with external template files. The difference is in logic, or direction you might say, they are injected. `@include` is when the template working in knows which external template to inject, such as navigation. This is useful when you have parts of templates that are used in many templates but don't want to rewrite it.
`@yield` is when the template working in, doesn't know the content, this should be more seen as a variable placeholder for child templates to inject content into the parent. (`@section`).
*Not covered here, but useful to add is a global handler for alert and info messages.*
##### Navbar
For our navbar this should be stored in `layouts.parts.navbar`. As the navbar isn't going to have any sub-elements I will just use the default from Bootstrap:
```html
```
### Using the layout
#### `@extends`
Now building our content page we can benefit from the layout templates. `@extends` allows to inherit a parent template sort of how `extends` works for a class in PHP. I like to put `@extends` at the top of my blade files.
Create the file `/resources/views/content.blade.php` with the following content:
```html
@extends('layouts.app')
```
#### `@section`
Remember we used `@yield` in the layouts file? This is referred to as sections in child templates. This means we create a section in the child, which is injected at the yield point in the parent template.
**You should avoid ending up with 2 names that are the same, unless it's unlikely the templates are used together such as for the different layouts**
Make your content site look like this:
```html
@extends('layouts.app')
@section('content')
My content goes here, both plain text, HTML and Blade syntax.