This tutorial help to create a theme layout using laravel 8 and bootstrap 4. I am using the blade template engine to create a theme layout in laravel 8.
Laravel is a very powerful and popular framework in PHP. The laravel help to create a complex web application in an easy way. The Blade is one of the powerful templating engine in PHP, which will generate theme layout in HTML format.
All blade files use .blade.php file extension and stored in resources/views(laravel 8) directory. The Blade engines provide fast views without any overhead due to cached views until they are modified. Blade engines is using template inheritance and sections.
In this tutorial, We will convert a simple HTML Bootstrap theme into laravel layout. I am converting the 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,
css, js and images folder and files.Let’s create separate following template files, These files will have separate portions of the theme 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 a 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> 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 the main content area of the 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 a new views/partials/header.blade.php file and paste Cool Admin theme header HTML code.
Step 6: Created a new views/partials/sidebar.blade.php file and paste Cool Admin theme sidebar html code.
Step 7: Created a new views/partials/footer.blade.php file and paste Cool Admin theme footer HTML code.
We have created master layout which will have all theme partial sections except the content area, because the content will change based on request/routes but the header, footer and sidebar will not change.
We will define the layout name into each template and bind it with routes. The routes help to find the correct template name which will render.
Let’s create a new home.blade.php file into the /views folder and added the below code into this file.
@extends('layouts.master')
@section('content')
<div class="page-content">This is my home page</div>
@stop As you can see, I have used the layout name "master" otherwise it will take the default laravel layout.
Now define routes and call the above view, Let’s add the below entry into the routes/web.php file.
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.
This post help to understand Laravel 8 Theme file structure. We have integrated bootstrap 4 theme with laravel 8. The laravel 8 template page is created by Blade template. You can get more info about laravel layout and blade on official laravel website
in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More
This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More
We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More
in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More
I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More
in this Laravel tutorial, I will explore common practices for using the Laravel Blade template with examples. Blade is a… Read More