Simple Laravel 6 Layouts Using Blade and Bootstrap 4

This tutorial help to create theme layout using laravel 6 and bootstrap 4.I am using blade template engine to create theme layout in laravel 6.

The Laravel is very powerful and popular framework in PHP. The laravel help to create complex web application in easy way. The Blade is one of them powerful templating engine in php, which will generate theme layout in HTML format.

All blade files uses .blade.php file extension and stored in resources/views(laravel 6) directory. The Blade engines provides fast views without any overhead due to cached views until they are modified. Blade engine are using template inheritance and sections.

In this tutorial, We will convert simple HTML Bootstrap theme into laravel layout. I am converting Bootstrap 4 HTML template into laravel layout using partial layout functionality. I am using Cool Admin theme.

The CoolAdmin is a free to use Bootstrap 4 admin template. This template uses the Bootstrap 4 styles along with a variety of powerful jQuery plugins and tools to create a powerful framework for creating admin panels or back-end dashboards.

You can also check other recommended tutorials of Lumen/Laravel,

We will modify following Laravel 6 folders and files

public : This folder will contain css, js and images folder and files.
resources/views : This folder will contain all views file.
resources/views/layouts : This folder will contain all layout files .
resources/views/partials : This folder will contain all layout partial files like header, footer and sidebar etc.

Let’s created separate following template files, These file will have separate portion of theme layout –

/resources/views/partials/header.blade.php : This file will contains html template header part.
/resources/views/partials/sidebar.blade.php : This file will contains html template sidebar part.
/resources/views/partials/footer.blade.php : This file will contains html template footer part.
/resources/views/layouts/master.blade.php : This file will use to include above partial files and create master layout template which will render on each laravel request.

Simple steps to convert Bootstrap Theme into laravel template layout

Step 1: Download Cool Admin theme.
Step 2: Move all theme js, css, images and fonts folder and files into laravel-blog /public folder.
Step 3: Created new views/layouts/master.blade.php file and put below codes into this file.

    <title>Laravel Layout</title>

    <!-- Fontfaces CSS-->
    <link href="{{{ URL::asset('css/font-face.css') }}}" rel="stylesheet" media="all">
    <link href="{{{ URL::asset('vendor/font-awesome-4.7/css/font-awesome.min.css')}}}" rel="stylesheet" media="all">
    <link href="{{{ URL::asset('vendor/font-awesome-5/css/fontawesome-all.min.css')}}}" rel="stylesheet" media="all">
    <link href="{{{ URL::asset('vendor/mdi-font/css/material-design-iconic-font.min.css')}}}" rel="stylesheet" media="all">

    <!-- Bootstrap CSS-->
    <link href="{{{ URL::asset('vendor/bootstrap-4.1/bootstrap.min.css')}}}" rel="stylesheet" media="all">

    <link href="{{{ URL::asset('vendor/animsition/animsition.min.css')}}}" rel="stylesheet" media="all">

    <!-- Main CSS-->
    <link href="{{{ URL::asset('css/theme.css')}}}" rel="stylesheet" media="all">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
    
    
</head>

<body class="">
<div class="page-wrapper">@include('partials.header') @include('partials.sidebar')
<div class="page-container">
<div class="main-content">
<div class="section__content section__content--p30">
<div class="container-fluid">@yield('content')</div>
</div>
</div>
<div class="col-sm-12">@include('partials.footer')</div>
</div>
</div>

<title>Laravel Layout</title>

</head>

<div class="page-wrapper">@include('partials.header') @include('partials.sidebar')

<div class="container-fluid">@yield('content')</div>

</div>

<div class="col-sm-12">@include('partials.footer')</div>

</div>

You can see above code, I am using two directives,
@include : This directive used to include partial files.
@yield : This directive used to set content into the section, which is main content area of layout.

Now we have created master layout which will generate dynamic template using partial view files, We have divided theme page into partial pages and included into master layout file.

Step 5: Created new views/partials/header.blade.php file and paste Cool Admin theme header html code.
Step 6: Created new views/partials/sidebar.blade.php file and paste Cool Admin theme sidebar html code.
Step 7: Created new views/partials/footer.blade.php file and paste Cool Admin theme footer html code.

We have create master layout which will have all theme partial sections except content area, because content will change based on request/routes but header, footer and sidebar will not change.

How to use layout in laravel 6

We will define layout name into the each template and bind with routes. The routes help to find the correct template name which will render.

Create a new Template View

Let’s create a new home.blade.php file into the /views folder and added below code into the this file.

@extends('layouts.master')
@section('content')

1 2	@extends('layouts.master') @section('content')

This is my home page

@stop

@stop

As you can see, I have used layout name “master” otherwise it will take default laravel layout.

Define Routes in Laravel 6

Now define routes and call above view,Let’s add below entry into the routes/web.php file.

Route::get('/home', function () {
    return view('home');
});

Route::get('/home', function () {

return view('home');

});

Now run laravel application using php artisan serve and navigate http://http://localhost:8000, You can get Cool Admin theme page layout with ‘this is my home page’ message.

Conclusion :

This post help to understand Laravel6 Theme file structure. We have integrated bootstrap 4 theme with laravel 6.The laravel 6 template page is created by Blade template. You can get more info about laravel layout and blade on official laravel website