CODEWITHSUNDEEP
phplaravellaravel-4
user1801060
user1801060

Reputation: 2821

Include Bootstrap in Laravel

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?

Upvotes: 21

Views: 107310

Answers (7)

haileyesus zemed
haileyesus zemed

Reputation: 11

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>

Upvotes: 1

mk23
mk23

Reputation: 1403

Run below command, this will resolve the issue

npm i @popperjs/core

Upvotes: 1

Brad Ahrens
Brad Ahrens

Reputation: 5178

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

Upvotes: 45

dwenzel
dwenzel

Reputation: 99

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

Upvotes: 5

The Alpha
The Alpha

Reputation: 146269

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.

Upvotes: 19

user1669496
user1669496

Reputation: 33148

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.

Upvotes: 4

Dennis Braga
Dennis Braga

Reputation: 1478

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

Upvotes: 2

Related Questions