Start Bootstrap Admin Template (SB Admin 2) Partials in Laravel Blade

4 min readAug 26, 2020

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.

Prerequisites

Familiarly with PHP is required since Laravel is based on PHP.
Laravel (if not installed you can check Laravel Installation)
HTML, CSS
SB Admin 2 (you can download it from Start Bootstrap Site)
You also need to be familiar with Linux/macOS bash where we’ll be executing the commands in this tutorial.

If the above requirements are not found in your machine, you can check this article it will guide you through all process you need check the following article :

Install Laravel on Ubuntu 18.04 with Apache, MySQL, PHP7 (LAMP) stack

How to install Laravel and LAMP on Ubuntu less than 10 minute!

medium.com

For development I will be using an Ubuntu 18.04 machine so the commands in this tutorial are targeting this system, but you should be able to follow this tutorial in any operating system you use.

Installing Laravel Project

Change your directory to the place you want like:

cd ~
laravel new sb_admin_partial_in_blade

Your project and also its storage directory should be accessible, and for each fresh installation don’t forget to generate base64 random number encryption key. So we will do these commands:

chmod -R 777 ~/sb_admin_partial_in_blade/storage
cd sb_admin_partial
php artisan key:generate

You may use the serve Artisan command. This command will start a development server at http://localhost:8000:

php artisan serve

Open above link in your browser and main page will appear as shown

If this appear than Laravel project is install successfully. For now stop development server.

SB Admin

You can download it from official site for free and implement it in our public directory

cd public
wget https://github.com/StartBootstrap/startbootstrap-sb-admin-2/archive/gh-pages.zip

A gh-pages.zip is now found in public

- public
-- facicon.ico
-- gh-pages.zip
-- index.php
-- robots.txt

Extract the file through command:

unzip gh-pages.zip

A new file will appear:

- public
-- facicon.ico
-- gh-pages.zip
-- index.php
-- robots.txt
-- startbootstrap-sb-admin-2-gh-pages/ --this file we will deal with

Views

Let’s create the files necessary for creating a whole templating system. Here are the folders and files. Go ahead and create them.

- resources
-- views
--- partials
---- footer.blade.php
---- footer-script.blade.php
---- head.blade.php
---- menu.blade.php
---- navbar.blade.php
---- topbar.blade.php
--- portal
---- dashboard.blade.php
--- layout
---- app.blade.php

After creating above files we will take a deep dive in SB Admin template structure

sections has been folded in order to explain them

As you can see, there is a HTML comment in begin of section and also at the end of it and that can help us.

Now let’s make a template fragmentation by copy all content in public/startbootstrap-sb-admin-2-gh-pages/index.html to resources/views/layout/app.balde.php and partial sections as files below:

resources/views/layout/app.balde.php

As you can see we move some of code to those files that represent them in main app template, if you would like to go further you can check Laravel Template Inheritance.

And for other files i will show them below.

resources/views/patials/head.blade.php

In Laravel blade you need point the href’s of all styles and scripts to your application assets folder that you can be found in the project’s public directory (which will be inside you theme directory).

For example in the <head> of public/startbootstrap-sb-admin-2-gh-pages/index.html you can find the style like this

<link href="css/sb-admin-2.min.css" rel="stylesheet">

In resources/views/partials/head.blade.php it would be like this

<link href="{{ asset('startbootstrap-sb-admin-2-gh-pages/css/sb-admin-2.min.css') }}" rel="stylesheet">

Once you complete all template fragmentation open routes/web.php and change returning view from this

return view('welcome');

To this

return view('portal.dashboard');

And then you can run development serve for checking the result

You can save you time and check my repository in GitHub (sb_admin_partial_in_blade) to begin your next application.

Conclusion

Now we can create a simple foundation for the front-end views for your SPA site. Layouts, slices, and pages all work together to create an easy templating system. There is much more that Laravel Blade Templating and I encourage you to take a look at what else we can do.

Thanks for reading and let us know if you have any questions or comments or what you’d like us to write about in the comments.