Login/Register
Include Bootstrap in Laravel
Asked Answered
Solved phplaravellaravel-4
R

7

20

I'm a Laravel newbie. I have just installed some 3rd party packages and I would like to integrate Twitter bootstrap into my script. Is there any way to do it, short of going into each package and adding the code to the blade templates of each view?

Robedechambre answered 11/3, 2014 at 14:45 Comment(0)
F
17

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.

Farika answered 11/3, 2014 at 19:51 Comment(0)
M
44

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>

@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

Mcmaster answered 13/10, 2019 at 19:2 Comment(4)
After adding @import "node_modules/bootstrap/scss/bootstrap";, run npm run dev to generate /public/css/app.css file. – Howdah
And what about the bootstrap.js file? How to import it to your app.js if there's already added "bootstrap.js" (different) from laravel? – Biquadrate
@Syvat, I have updated my answer. Let me know if that helps. – Mcmaster
the Update method to add bootstrap helped me a lot because i was using now the laravel 8x version so for the next time, i'm gonna use this way to add latest version of bootstrap, thanks! – Bromine
F
17

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.

Farika answered 11/3, 2014 at 19:51 Comment(0)
D
4

Laravel > 6.x introduced a new approach to deal with frontend scaffolding, laravel/ui.

You can simply download the composer package:

composer require laravel/ui --dev

And run a artisan command:

php artisan ui bootstrap
Demesne answered 4/3, 2020 at 13:57 Comment(0)
A
3

The best way would be to create a master template and have each of your templates extend the master template.

Then in the master template, any time you need to add something like Twitter Bootstrap, jQuery, etc... to your app, you just add to the the master template and then it would be available to each page you have.

Andes answered 11/3, 2014 at 15:16 Comment(0)
D
1

Just create a template (you can call it main, if it pleases you). Include the Twitter Bootstrap on it. Extend all of your other blades views from it.

YES, it's that simple! =D

December answered 11/3, 2014 at 15:15 Comment(0)
Z
0

Run below command, this will resolve the issue

npm i @popperjs/core
Zetland answered 10/5, 2021 at 13:9 Comment(3)
Could you give some explanation to your answer, why it should solve the issue? – Importance
I think this is Tooltip & Popover Positioning Engine which bootstrap uses. – Zetland
Once this is installed make sure to include <link href="/css/app.css" rel="stylesheet"> and <script src="/js/app.js"></script> – Zetland
F
0

On laravel 10, after install bootstrap using laravel UI by:

composer require laravel/ui
php artisan ui bootstrap
npm install && npm run dev

You'll also need to load the bootstrap's scss and js that vite compiles for you, so in your main/master blade template that the other templates import, Add @vite(['resources/sass/app.scss', 'resources/js/app.js']) at the header of the HTML, such that it becomes:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">

    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
Fiden answered 10/6, 2024 at 13:45 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.