Include Bootstrap in Laravel

This is the top/header part of my currently running application's master layout:

<!-- app/views/layouts/master.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Simple CMS" />
    <meta name="author" content="Sheikh Heera" />
    <link rel="shortcut icon" href={{ assets("favicon.png") }} />

    <title>LaraPress</title>

    <!-- Bootstrap core CSS -->
    <link href = {{ asset("bootstrap/css/bootstrap.css") }} rel="stylesheet" />

    <!-- Custom styles for this template -->
    <link href = {{ asset("bootstrap/css/sticky-footer-navbar.css") }} rel="stylesheet" />

    <!-- Optional theme -->
    <link rel="stylesheet" href="{{ asset('bootstrap/css/bootstrap-theme.min.css') }}">
</head>

Follow this approach and make your each view to extend the master layout like this:

<!-- app/views/user/show.blade.php -->
@extends('layouts.master')

@section('content')
<div class="panel panel-default">
    <div class="panel-heading"><label>View User</label>
        <a class ='pull-right' href="{{ Request::header('referer') }}">
            <i class="glyphicon glyphicon-circle-arrow-left"></i> Go Back
        </a>
    </div>

This is a partial of my view (top part) which extends the master layout so it become a part of the master layout. Master layout is stored in app/views/layouts/ folder and name is master.blade.php so, @extends('layouts.master') means to extend master.blade.php from layouts folder and it (name) could be anything, each view also must contains .blade in the file name before the .php.


Update for Laravel 7.*

Within terminal:

laravel new project

cd project

composer require laravel/ui

php artisan ui bootstrap

npm install && npm run dev

Then, in the HTML that you are working on, pull in both the CSS and JavaScript:

<!doctype html>
<html lang="en">
  <head>
    ...
    <link href="/css/app.css" rel="stylesheet">
  </head>
  <body>
    ....
    <script src="/js/app.js"></script>
  </body>
</html>
  • Documentation for Laravel UI

@Svyat, hopefully, this answers your question as well.

Happy coding :)

I realize that this is old... but it was the top result that come up for me on Google. Hopefully this will help someone in the future.

If you are using Laravel 6.2,

Within terminal:

npm install bootstrap

Within app.scss:

@import "node_modules/bootstrap/scss/bootstrap";

In Terminal, run the following to generate /public/css/app.css file:

npm run dev

Within welcome.blade.php:

<link rel="stylesheet" href="/css/app.css">

Happy coding

Tags:

Php

Laravel

Laravel 4

Recent Posts