Laravel - Adding Bootstrap to Project

Submitted by: 
Language: 
Visitors have accessed this post 365 times.

Getting Started

First, we're going to create a new project named mysite and we're going to add it to our localhost with the name mysite.dev. If you have no idea on how to do this, you may refer to my tutorial about Installing Laravel.

Download Bootstrap

Next, we're going to download and add bootstrap to our project.

1. Download bootstrap using this link.

2. Extract the file and copy the folders - css, fonts and js.

3. Open our project, in my case in mysite, then open public folder and paste the bootstrap folders.

projectpublic

Creating our Views

Next, we're going to create our files.

In our project, in my case mysite, open resources folder and in views folder create the ff. PHP files:

app.blade.php

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>Setting up Bootstrap in Laravel</title>
  4. <link rel="stylesheet" type="text/css" href="{{ asset('/css/bootstrap.min.css') }}">
  5. <link rel="stylesheet" href="/css/app.css">
  6. </head>
  7. @include('navbar')
  8. <div class="container">
  9. @if(Request::is('/'))
  10. @include('showcase')
  11. @endif
  12. @yield('content')
  13. </div>
  14. <script type="text/javascript" src="{{ asset('/js/bootstrap.min.js') }}"></script>
  15. </body>
  16. </html>

button.blade.php

  1. @extends('app')
  2.  
  3. @section('content')
  4. <h1 class"page-header text-center">Bootstrap Buttons</h1>
  5. <div class="row">
  6. <div class="col-md-12">
  7. <h3>Buttons with Glyphicon</h3>
  8. <button class="btn btn-primary"><span class="glyphicon glyphicon-home"></span> Primary</button>
  9. <button class="btn btn-success"><span class="glyphicon glyphicon-home"></span> Success</button>
  10. <button class="btn btn-info"><span class="glyphicon glyphicon-home"></span> Info</button>
  11. <button class="btn btn-warning"><span class="glyphicon glyphicon-home"></span> Warning</button>
  12. <button class="btn btn-danger"><span class="glyphicon glyphicon-home"></span> Danger</button>
  13. </div>
  14. </div>
  15. </div>
  16. @endsection

home.blade.php

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

navbar.blade.php

  1. <nav class="navbar navbar-inverse">
  2. <div class="container">
  3. <div class="navbar-header">
  4. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  5. <span class="sr-only">Toggle navigation</span>
  6. <span class="icon-bar"></span>
  7. <span class="icon-bar"></span>
  8. <span class="icon-bar"></span>
  9. </button>
  10. <a class="navbar-brand" href="#">MySite.Dev</a>
  11. </div>
  12. <div id="navbar" class="collapse navbar-collapse">
  13. <ul class="nav navbar-nav">
  14. <li class="{{ (Request::is('/') ? 'active' : '') }}"><a href="/">Home</a></li>
  15. <li class="{{ (Request::is('button') ? 'active' : '') }}"><a href="/button">Buttons</a></li>
  16. </ul>
  17. </div>
  18. </div>
  19. </nav>

showcase.blade.php

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

Creating our Routes

Lastly, we create the routes to our pages.

In our project, in my case in mysite, open routes folder and open web.php.

As you can see, the default route is this:

  1. Route::get('/', function () {
  2. return view('welcome');
  3. });

Change this with the ff codes:

  1. Route::get('/', function () {
  2. return view('home');
  3. });
  4.  
  5. Route::get('/button', function () {
  6. return view('button');
  7. });

Running our Server

In your web browser type in the name that you added in localhost. In my case mysite.dev. It should look like this:

mysite

That ends this tutorial. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.