21

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?

Improve this question

7 Answers 7

Reset to default
45

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

After adding @import "node_modules/bootstrap/scss/bootstrap";, run npm run dev to generate /public/css/app.css file.
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?
@Syvat, I have updated my answer. Let me know if that helps.
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!
19

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.

Improve this answer

Comments

5

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
Improve this answer

Comments

4

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.

Improve this answer

Comments

2

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

Improve this answer

Comments

1

Run below command, this will resolve the issue

npm i @popperjs/core
Improve this answer

3 Comments

Could you give some explanation to your answer, why it should solve the issue?
I think this is Tooltip & Popover Positioning Engine which bootstrap uses.
Once this is installed make sure to include <link href="/css/app.css" rel="stylesheet"> and <script src="/js/app.js"></script>
1

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.