Start Bootstrap Admin Template (SB Admin 2) Partials in Laravel Blade
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 :
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
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
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.