Integrate Bootstrap Template with Laravel
Updated Jan 11, 2021 View by 3.1 K
Creating the layout is an important part of any project. Realizing this, Laravel comes with Blade templating engine which generates HTML based sleek designs and templates. All Laravel views built using Blade are located in resources/views.
Bootstrap is well known in the development circles for impressive design options. Laravel makes it incredibly easy to use Bootstrap templates in project’s views. In this tutorial, I will demonstrate how Bootstrap templates could be used within Laravel Blade engine.
Integrating Bootstrap template with Laravel is a simple process. All you need to do is cut your HTML Bootstrap into tiny Blade template contents, and then use, extend and/or include the templates in the main Blade file. To demonstrate the process, I will use Album Example For Bootstrap
Create Layout File
Before creating the layout file, you need to understand the Laravel file structure. For this, I recommend reading my article on creating Laravel layouts using Blade templating engine.
Now let’s take a look at the code of the template page and identify the different parts of the page. Keep these parts in separate files for easy management.
Now as you can see the code of your template. It consists of different parts and I will create a layout in which I’ll keep all the partial parts of the layout separate.
Go to resources/view folder and create a new folder with the name, layouts. This folder will contain the main layout (and other files that will be included in the layout).
Now, create another folder and name it partials. This folder will contain partial files such as header and footer that will be used by the layout file.
Go to the layout folder and create a file named mainlayout.blade.php. Add the following code to it:
<!DOCTYPE html>
<html lang="en">
<head>
@include('layout.partials.head')
</head>
<body>
@include('layout.partials.nav'
@include('layout.partials.header')
@yield('content')
@include('layout.partials.footer')
@include('layout.partials.footer-scripts')
</body>
</html>
This code creates a layout file that will include (@include) all the contents of the specified file at the desired location inside the HTML file. @yield will put the specified content of the file which is extending this layout.
Create Partial Files
Next, create partial files that are included in the main layout file. Go to the partials folder and create a file named head.blade.php. This file will contain the content that goes into the head section of the page.
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Album example for Bootstrap</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUIyJ" crossorigin="anonymous"> <!-- Custom styles for this template --> <link href="/css/album.css" rel="stylesheet">
Create a file nav.blade.php . This file will contain the code related to creating the navigation of the bootstrap page
<div class="collapse bg-inverse" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="col-sm-4 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Follow on Twitter</a></li>
<li><a href="#" class="text-white">Like on Facebook</a></li>
<li><a href="#" class="text-white">Email me</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse bg-inverse">
<div class="container d-flex justify-content-betIen">
<a href="#" class="navbar-brand">Album</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
Next, create the file header.blade.php. This file will contain the visible header of the Bootstrap page.
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sIet, but not too short so folks don't simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary">Main call to action</a>
<a href="#" class="btn btn-secondary">Secondary action</a>
</p>
</div>
</section>
The next step is to create the file for a footer. For this, create a file named footer.blade.php.
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
</div>
</footer>
Now create a file named footer-scripts.blade.php that contains the JS files that should be included in the bottom of the page.
<!-- Bootstrap core JavaScript ================================================= --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
After creating all the views files, the views folder should look something like this:
That’s it, The sample Bootstrap template Album Bootstrap is now integrated with Laravel.
Testing the Integration
Let’s create a view file that extends this layout file, so that you can see the Bootstrap layout integration with Laravel Blade template in action.
Create a file demo.blade.php in the views folder and add the following content to the file:
@extends('layout.mainlayout')
@section('content')
<div class="album text-muted">
<div class="container">
<div class="row">
<h1>This is a demo text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas dolor vulputate quam convallis consequat. Quisque eu lorem eget magna lacinia suscipit. Maecenas condimentum vehicula eros. Fusce massa lacus, blandit et leo sed, accumsan commodo sem. Sed eget pulvinar tellus. Praesent ex diam, sodales at consequat id, viverra ut dolor. In eget orci sit amet magna sagittis mattis sit amet sed augue. Vivamus facilisis libero ligula, vel sodales ipsum sollicitudin id. Duis vitae urna rutrum, dignissim arcu ac, elementum augue. Quisque id interdum ligula. Donec tincidunt feugiat massa sed aliquam. Duis eu vehicula turpis.</p>
</div>
</div>
</div>
@endsection
<b></b>
Create the Routes
Now that the view is created, the next step is the creation of a route to access the view. For this, go to routes/web.php and paste the following routes.
Route::get('/demo', function () {
return view('demo');
});
Now run the application using the staging URL. You will see the Album Bootstrap template integrated with your application.
Integerate bootstrap admin template in Laravel
In this example, I will demonstrate how to integrate Cool Admin Dashboard into a Laravel app. It will thoroughly explain you how easy it is to integrate bootstrap themes in Laravel application.
Here is an example illustrating the step-by-step process of integrating admin theme into an app. It is one of the major requirements of any web application, as it allows us to manage various components of the website just from the dashboard.
In this tutorial I will create two pages after integration of theme. In these two pages I will use our integrated theme. That pages will bear the following names.
1) my-home
2) my-users
Download Cool Admin Dashboard
First of all, download any dashboard you like to integrate with your Laravel app. I have downloaded the Cool Admin dashboard as it is easy to use and has a user-friendly interface. After the download is complete, extract the JS, CSS files and icons from it and put within the Laravel application.
Secondly, create a theme folder within the public folder and copy all the data into that theme directory.
Config Route
Now, I will add two routes “my-home” and “my-users” for two pages. Open the route file and add following route code:
routes/web.php
Route::get('my-home', 'HomeController@myHome');
Route::get('my-users', 'HomeController@myUsers');
Add Controller
In this step, I will create new HomeController and add two methods for dashboard page and my users page. Type the following code on for the HomeController.
app/Http/Controllers/HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Item;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
}
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function myHome()
{
return view('myHome');
}
/**
* Show the my users page.
*
* @return \Illuminate\Http\Response
*/
public function myUsers()
{
return view('myUsers');
}
}
Set Theme Blade Files
The next step is to setup theme blade files. I will create three files for Cool Admin Dashboard theme. If you have any other theme which is large in size, then you can also create some more files to manage it. I will create theme folder containing three files within the view folder:
The three files are named as:
1)default.blade.php
2)header.blade.php
3)sidebar.blade.php
Now I have to add code for these three files as listed below:
resources/views/theme/default.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href="{!! asset('theme/vendor/bootstrap/css/bootstrap.min.css') !!}" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="{!! asset('theme/vendor/metisMenu/metisMenu.min.css') !!}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{!! asset('theme/dist/css/sb-admin-2.css') !!}" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="{!! asset('theme/vendor/morrisjs/morris.css') !!}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="{!! asset('theme/vendor/font-awesome/css/font-awesome.min.css') !!}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
@include('theme.header')
@include('theme.sidebar')
</nav>
<div id="page-wrapper">
@yield('content')
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper --
<!-- jQuery -->
<script src="{!! asset('theme/vendor/jquery/jquery.min.js') !!}"></script>
<!-- Bootstrap Core JavaScript -->
<script src="{!! asset('theme/vendor/bootstrap/js/bootstrap.min.js') !!}"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="{!! asset('theme/vendor/metisMenu/metisMenu.min.js') !!}"></script>
<!-- Morris Charts JavaScript -->
<script src="{!! asset('theme/vendor/raphael/raphael.min.js') !!}"></script>
<script src="{!! asset('theme/vendor/morrisjs/morris.min.js') !!}"></script>
<script src="{!! asset('theme/data/morris-data.js') !!}"></script
<!-- Custom Theme JavaScript -->
<script src="{!! asset('theme/dist/js/sb-admin-2.js') !!}"></script>
</body>
</html>
Setup Header
Insert the following code inside the directory file resources/views/theme/header.blade.php
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="#pablo">Dashboard</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<form class="navbar-form">
<span class="bmd-form-group"><div class="input-group no-border">
<input type="text" value="" class="form-control" placeholder="Search...">
<button type="submit" class="btn btn-white btn-round btn-just-icon">
<i class="material-icons">search</i>
<div class="ripple-container"></div>
</button>
</div></span>
</form>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#pablo">
<i class="material-icons">dashboard</i>
<p class="d-lg-none d-md-block">
Stats
</p>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">notifications</i>
<span class="notification">5</span>
<p class="d-lg-none d-md-block">
Some Actions
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike John responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">person</i>
<p class="d-lg-none d-md-block">
Account
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Log out</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Sidebar
After successfully setting up header, it’s time to setup sidebar. Type the following code.
<div class="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
<!--
Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
Tip 2: you can also add an image using data-image tag
-->
<div class="logo">
<a href="http://www.creative-tim.com" class="simple-text logo-normal">
Creative Tim
</a>
</div>
<div class="sidebar-wrapper ps-container ps-theme-default" data-ps-id="d8631889-919e-0705-2d4b-159fdbdfe8cd">
<ul class="nav">
<li class="nav-item active ">
<a class="nav-link" href="./dashboard.html">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./user.html">
<i class="material-icons">person</i>
<p>User Profile</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./tables.html">
<i class="material-icons">content_paste</i>
<p>Table List</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./typography.html">
<i class="material-icons">library_books</i>
<p>Typography</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./icons.html">
<i class="material-icons">bubble_chart</i>
<p>Icons</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./map.html">
<i class="material-icons">location_ons</i>
<p>Maps</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./notifications.html">
<i class="material-icons">notifications</i>
<p>Notifications</p>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="./rtl.html">
<i class="material-icons">language</i>
<p>RTL Support</p>
</a>
</li>
<li class="nav-item active-pro ">
<a class="nav-link" href="./upgrade.html">
<i class="material-icons">unarchive</i>
<p>Upgrade to PRO</p>
</a>
</li>
</ul>
<div class="ps-scrollbar-x-rail" style="left: 0px; bottom: 0px;"><div class="ps-scrollbar-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps-scrollbar-y-rail" style="top: 0px; right: 0px;"><div class="ps-scrollbar-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></div>
<div class="sidebar-background" style="background-image: url(../assets/img/sidebar-1.jpg) "></div>
</div>
Home
In this step, I will create two new blade files using the integrated theme layout. I have added two routes one for home and another for users. Let’s create two files and see how the integrated theme works.
resources/views/myHome.blade.php
@extends('theme.default')
@section('content')
@endsection
Employee Table
resources/views/myUsers.blade.php
<div class="col-lg-6 col-md-12">
<div class="card">
<div class="card-header card-header-warning">
<h4 class="card-title">Employees Stats</h4>
<p class="card-category">New employees on 15th September, 2016</p>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-warning">
<tr><th>ID</th>
<th>Name</th>
<th>Salary</th>
<th>Country</th>
</tr></thead>
<tbody>
<tr>
<td>1</td>
<td>Dakota Rice</td>
<td>$36,738</td>
<td>Niger</td>
</tr>
<tr>
<td>2</td>
<td>Minerva Hooper</td>
<td>$23,789</td>
<td>Curaçao</td>
</tr>
<tr>
<td>3</td>
<td>Sage Rodriguez</td>
<td>$56,142</td>
<td>Netherlands</td>
</tr>
<tr>
<td>4</td>
<td>Philip Chaney</td>
<td>$38,735</td>
<td>Korea, South</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
In this article, I have demonstrated the integration of Cool Admin Dashboard into a Laravel app, and also shown how to configure a customized theme in the application. Both integration techniques are illustrated in quite detail, and hopefully they will work out for you, and help you develop optimized web application(s).
If you still have questions about this tutorial, feel free to use the comments section for your inquiries
To Sum Up
In this tutorial, I have demonstrated an easy way of integrating any Bootstrap template in a Laravel application. If you have any questions kindly comment below. Also, follow me on Twitter and get connected.
<!DOCTYPE html> <html lang="en"> <head> @include('layout.partials.head') </head> <body> @include('layout.partials.nav' @include('layout.partials.header') @yield('content') @include('layout.partials.footer') @include('layout.partials.footer-scripts') </body> </html>
