Laravel - Setting up Bootstrap

crackedto · Thursday at 6:21 AM

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.

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:

Running our Project

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

That ends this tutorial. Happy Coding :)

Laravel - Setting up Bootstrap

More options

crackedto

452,496

337,656

337,664