Laravel - Setting up Bootstrap

Submitted by nurhodelta_17 on Thursday, November 16, 2017 - 20:49.

Getting Started

First we're are going to create a new project and add it to our localhost. I'm gonna name it mysite and in localhost mysite.dev. If you have no idea how to create a new project and on how to add it to localhost, please refer to my tutorial about Installing Laravel.

Installing Node.js

Next, we're going to use node.js to handle the development dependecies of laravel. Use this link to download node.js and select the recommended version.

Installing our Dependencies

1. Open command prompt and navigate to your project directory. In my case, in C:\xammp7\htdocs\mysite. 2. Type npm install. It will download all the necessary dependencies like bootstrap-sass, jquery, etc. npminstall

Setting up our Routes

To test if we have installed bootstrap, we're going to create a simple navbar that contains our Home, About and Contact page. Go to routes folder and open in your text editor web.php. You can see that the default route is this:

Route::get('/', function () {
    return view('welcome');
});

Change this into the ff codes:

Route::get('/', function () {
    return view('home');
});
 
Route::get('/about', function () {
    return view('about');
});
 
Route::get('/contact', function () {
    return view('contact');
});

This will create our routes with home as the index. As you can see, the route will return view then the name of the file. It means that it will return in views folder with the file name home.blade.php for home route.

Setting up our Views

Go to views folder and create the ff files: home.blade.php

@extends('layout.app')
 
@section('content')
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@endsection

about.blade.php

@extends('layout.app')
 
@section('content')
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@endsection

contact.blade.php

@extends('layout.app')
 
@section('content')
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@endsection

Notice that in this code @extends('layout.app'), it extends in layout folder in file name app.blade.php. So we're gonna make that file.

Creating our Extends and Includes

In views folder, create another folder and name it as layout then create a file inside it and name it as app.blade.php app.blade.php

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Laravel Sample Site</title>
        <link rel="stylesheet" href="/css/app.css">
</head>
<body>
@include('inc.navbar')
<div class="container">
        @if(Request::is('/'))
                @include('inc.showcase')
        @endif
        @yield('content')
</div>
</body>
</html>

Notice that we have include navbar.blade.php and showcase.blade.php located in inc folder. To create this files, in views folder, create a new folder named inc and inside it create a new file named navbar.blade.php and another file named showcase.blade.php. navbar.blade.php

<nav class="navbar navbar-inverse">
        <div class="container">
                <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">MySite.Dev</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                        <li class="{{ (Request::is('/') ? 'active' : '') }}"><a href="/">Home</a></li>
                <li class="{{ (Request::is('about') ? 'active' : '') }}"><a href="/about">About</a></li>
                <li class="{{ (Request::is('contact') ? 'active' : '') }}"><a href="/contact">Contact</a></li>
                </ul>
        </div>
        </div>
</nav>

showcase.blade.php

<div class="jumbotron text-center">
        <div class="container">
                <h1>Welcome to MySite</h1>
                <p class="lead">This is a Laravel Powered Site. This site uses Laravel version 5.5.</p>
        </div>
</div>

Your file structure should look like this: filestructure

Running our Project

Go to your web browser and type your project. In my case mysite.dev and it should look like this. bootstraplaravel