After learning the
Setup Virtual Host in Windows with XAMPP Server, today we are going to share how to Integrate Bootstrap Template in Laravel Application. Working in Laravel It’s a must to know how to implement Bootstrap templates with Laravel projects.
Bootstrap has become the most loved choice of developers when building powerful web applications. Bootstrap Laravel templates also make it simpler for users to build complex and powerful web apps. Here is a step-by-step guide on how you can use the Bootstrap framework with Laravel Application.
How to use Bootstrap in Laravel Panel
Follow the following step-by-step guide to use the bootstrap templates in Laravel application.
1. Download Laravel Project
First, you need to install a fresh laravel application using the following command.
composer create-project –prefer-dist laravel/laravel laravel-app
Next go to the application:
cd laravel-app
2. Make a layout file
The layout file is the main master file of the projects where we add css and javascript files. Create an ad dashbaord.blade.php name file inside the layouts folder and paste the below file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
WebApp
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="/assets/css/paper-dashboard.css?v=2.0.0" rel="stylesheet" />
</head>
<body class="">
<div class="wrapper ">
@include('includes.sidebar')
<div class="main-panel">
@include('includes.header')
@yield('content')
@include('includes.footer')
</div>
</div>
<!-- Core JS Files -->
<script src="/assets/js/core/jquery.min.js"></script>
<script src="/assets/js/core/popper.min.js"></script>
<script src="/assets/js/core/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
</body>
</html>
Now, navigate the resources/dashboard directory and create an index.blade.php file. Now open the
resources/dashboard/index.blade.php file and update the following code.
@extends('layoutes.dashboard')
@section('content')
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="card">
<div class="content">
<div class="row">
<div class="col-xs-5">
<div class="icon-big icon-warning text-center">
<i class="ti-server"></i>
</div>
</div>
<div class="col-xs-7">
<div class="numbers">
<p>Capacity</p>
105GB
</div>
</div>
</div>
<div class="footer">
<hr />
<div class="stats">
<i class="ti-reload"></i> Updated now
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card">
<div class="content">
<div class="row">
<div class="col-xs-5">
<div class="icon-big icon-success text-center">
<i class="ti-wallet"></i>
</div>
</div>
<div class="col-xs-7">
<div class="numbers">
<p>Revenue</p>
$1,345
</div>
</div>
</div>
<div class="footer">
<hr />
<div class="stats">
<i class="ti-calendar"></i> Last day
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card">
<div class="content">
<div class="row">
<div class="col-xs-5">
<div class="icon-big icon-danger text-center">
<i class="ti-pulse"></i>
</div>
</div>
<div class="col-xs-7">
<div class="numbers">
<p>Errors</p>
23
</div>
</div>
</div>
<div class="footer">
<hr />
<div class="stats">
<i class="ti-timer"></i> In the last hour
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card">
<div class="content">
<div class="row">
<div class="col-xs-5">
<div class="icon-big icon-info text-center">
<i class="ti-twitter-alt"></i>
</div>
</div>
<div class="col-xs-7">
<div class="numbers">
<p>Followers</p>
+45
</div>
</div>
</div>
<div class="footer">
<hr />
<div class="stats">
<i class="ti-reload"></i> Updated now
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header">
<h4 class="title">Users Behavior</h4>
<p class="category">24 Hours performance</p>
</div>
<div class="content">
<div id="chartHours" class="ct-chart"></div>
<div class="footer">
<div class="chart-legend">
<i class="fa fa-circle text-info"></i> Open
<i class="fa fa-circle text-danger"></i> Click
<i class="fa fa-circle text-warning"></i> Click Second Time
</div>
<hr>
<div class="stats">
<i class="ti-reload"></i> Updated 3 minutes ago
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="header">
<h4 class="title">Email Statistics</h4>
<p class="category">Last Campaign Performance</p>
</div>
<div class="content">
<div id="chartPreferences" class="ct-chart ct-perfect-fourth"></div>
<div class="footer">
<div class="chart-legend">
<i class="fa fa-circle text-info"></i> Open
<i class="fa fa-circle text-danger"></i> Bounce
<i class="fa fa-circle text-warning"></i> Unsubscribe
</div>
<hr>
<div class="stats">
<i class="ti-timer"></i> Campaign sent 2 days ago
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card ">
<div class="header">
<h4 class="title">2015 Sales</h4>
<p class="category">All products including Taxes</p>
</div>
<div class="content">
<div id="chartActivity" class="ct-chart"></div>
<div class="footer">
<div class="chart-legend">
<i class="fa fa-circle text-info"></i> Tesla Model S
<i class="fa fa-circle text-warning"></i> BMW 5 Series
</div>
<hr>
<div class="stats">
<i class="ti-check"></i> Data information certified
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Now, navigate the resources/views directory and create a folder named “includes” which will include to all the admin panels. Now create a
header.blade.php file inside the
resources/view/includes directory.
Now your folder structure is something like this “resources/views/includes/header.blade.php”.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar bar1"></span>
<span class="icon-bar bar2"></span>
<span class="icon-bar bar3"></span>
</button>
<a class="navbar-brand" href="#">Dashboard</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="ti-panel"></i>
<p>Stats</p>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="ti-bell"></i>
<p class="notification">5</p>
<p>Notifications</p>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Notification 1</a></li>
<li><a href="#">Notification 2</a></li>
<li><a href="#">Notification 3</a></li>
<li><a href="#">Notification 4</a></li>
<li><a href="#">Another notification</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="ti-settings"></i>
<p>Settings</p>
</a>
</li>
</ul>
</div>
</div>
</nav>
Same as the header file you need to create sitebar.blade.php file inside the resources/dashboard directory. Now open the
resources/dashboard/sitebar.blade.php file and update the following code.
<div class="sidebar" data-background-color="white" data-active-color="danger">
<div class="sidebar-wrapper">
<div class="logo">
<a href="" class="simple-text">
Creative Tim
</a>
</div>
<ul class="nav">
<li class="active">
<a href="dashboard.html">
<i class="ti-panel"></i>
<p>Dashboard</p>
</a>
</li>
<li>
<a href="user.html">
<i class="ti-user"></i>
<p>User Profile</p>
</a>
</li>
<li>
<a href="table.html">
<i class="ti-view-list-alt"></i>
<p>Table List</p>
</a>
</li>
<li>
<a href="typography.html">
<i class="ti-text"></i>
<p>Typography</p>
</a>
</li>
<li>
<a href="icons.html">
<i class="ti-pencil-alt2"></i>
<p>Icons</p>
</a>
</li>
<li>
<a href="maps.html">
<i class="ti-map"></i>
<p>Maps</p>
</a>
</li>
<li>
<a href="notifications.html">
<i class="ti-bell"></i>
<p>Notifications</p>
</a>
</li>
<li class="active-pro">
<a href="upgrade.html">
<i class="ti-export"></i>
<p>Upgrade to PRO</p>
</a>
</li>
</ul>
</div>
</div>
Now same as above create a new file footer.blade.php file inside the resources/dashboard directory. Now open the
resources/dashboard/footer.blade.php file and update the following code.
<footer class="footer">
<div class="container-fluid">
<nav class="pull-left">
<ul>
<li>
<a href="">
Creative Tim
</a>
</li>
<li>
<a href="">
Blog
</a>
</li>
<li>
<a href="">
Licenses
</a>
</li>
</ul>
</nav>
<div class="copyright pull-right">
© <script>document.write(new Date().getFullYear())</script>, made with <i class="fa fa-heart heart"></i> by <a href="">Creative Tim</a>
</div>
</div>
</footer>
I hope its work for you.
1 thought on “Integrating Bootstrap Template in Laravel Admin Panel”