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

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.

Installing Laravel Project

cd ~
laravel new sb_admin_partial_in_blade
chmod -R 777 ~/sb_admin_partial_in_blade/storage
cd sb_admin_partial
php artisan key:generate
php artisan serve
Open above link in your browser and main page will appear as shown

SB Admin

cd public
wget https://github.com/StartBootstrap/startbootstrap-sb-admin-2/archive/gh-pages.zip
- public
-- facicon.ico
-- gh-pages.zip
-- index.php
-- robots.txt
unzip gh-pages.zip
- public
-- facicon.ico
-- gh-pages.zip
-- index.php
-- robots.txt
-- startbootstrap-sb-admin-2-gh-pages/ --this file we will deal with

Views

- 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
sections has been folded in order to explain them

resources/views/layout/app.balde.php

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).

<link href="css/sb-admin-2.min.css" rel="stylesheet">
<link href="{{ asset('startbootstrap-sb-admin-2-gh-pages/css/sb-admin-2.min.css') }}" rel="stylesheet">
return view('welcome');
return view('portal.dashboard');
and everything work fine

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdullah Shallal

Abdullah Shallal

I am a professional System Administrator and Web Developer. I am an avid Linux lover and supporter of the open-source movement philosophy