How correctly install latest Bootstrap version into my Laravel 5.4 web application?

Question

I am pretty new in PHP and moreover in Laravel and I have the following problem: I have to correctly install latest Bootstrap CSS framework version into my Laravel application.

Into the Bootstrap download page: http://getbootstrap.com/getting-started/#download

it says that I can do it using composer by this statment:

composer require twbs/bootstrap

So I tryied and I obtained this output in my console:

Andrea@Andrea-PC MINGW64 /c/xampp/htdocs/HotelRegistration
$ composer require twbs/bootstrap
Using version ^3.3 for twbs/bootstrap
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing twbs/bootstrap (v3.3.7) Downloading: 100%
Package illuminate/html is abandoned, you should avoid using it. Use laravelcollective/html instead.
Writing lock file
Generating autoload files
> Illuminate\Foundation\ComposerScripts::postUpdate
> php artisan optimize
Generating optimized class loader
The compiled services file has been removed.

What exactly means the previous output? It has been successful? My doubt is that I can't find the bootstrap.css file into the .../resources/assets directory of my project.

Why? What am I missing? How can I use Bootstrap into my project?

EDIT 1: I saw that Composer have putted BootStrap in this folder:

.../vendor/twbs/bootstrap/dist/css/bootstrap.css

So, following this SO link: How to setup bootstrap after downloading via composer?

I have tryed to do:

php artisan asset:publish --path="vendor/twbs/dist/css" bootstrap/css

to publich the content of the vendor/twbs/dist/css as an asset but I obtain this error message:

Andrea@Andrea-PC MINGW64 /c/xampp/htdocs/HotelRegistration
$ php artisan asset:publish --path="vendor/twbs/dist/css" bootstrap/css


  [Symfony\Component\Console\Exception\CommandNotFoundException]
  There are no commands defined in the "asset" namespace.

So it seems that asset statment doesn't exist.

What have I to do?

score 6 · Answer 1 · answered Feb 20 '17 at 10:45

6

You are importing bootstrap wrong way. Mostly laravel uses composer for pulling server-side libraries. Bootstrap is used for front end basically.

Laravel By Default Provides Bootstrap for you, see here.

Following are the steps which will help you.

Step 1 : Check Node.js and NPM are installed on your machine.

node -v
npm -v

If not installed don't worry here is the link.

Step 2 : (Considering you installed node.js) Go to project root folder and execute following command.

npm install

this command will download all pre-requisites along with your bootstrap.

Step 3 : compile the required js files.

npm run dev

Step 4 : Add js file to your application.

<script src="/js/app.js"></script> (Or it would be already imported)

That's it!

You can find more here and here

Hope it helps you!

answered Feb 20 '17 at 10:45

Vaibhavraj Roham

1,138
11
26

1

Ok I have done but where are the bootstrap.css file? and how can I import it into my view? So I can use BootStrap classes... – Feb 20 '17 at 11:15
just add `` to head tag. That's it!. Everything will be imported. – Vaibhavraj Roham Feb 20 '17 at 11:21
[Here] (https://laravel.com/docs/5.4/mix) you can learn more how it works. – Vaibhavraj Roham Feb 20 '17 at 11:22

Abdou Tahiri · Answer 2 · 2017-02-20T11:40:14.313

3

If i were you i wouldn't do all of that, after a fresh installation of laravel 5.4 twitter bootstrap come out of the box you just need to load your dependancies using npm .

Install npm dependancies :

npm install

Then, Implementing Bootstrap into your project is now simple. Open resources/assets/sass/app.scss and see this line:

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

now to compile all bootstrap sass files to your public folder public/ you should use npm run dev or npm run production if you're in production environnement .

then you have all the Bootstrap styles ready for you to use. That’s literally all that is required.

edited Feb 20 '17 at 11:40

answered Feb 20 '17 at 10:51

Abdou Tahiri

4,338
5
25
38

What have I to do to run "gulp"? Have I to install it or what? – Feb 20 '17 at 11:18
@abdou-tahir, You can't use **gulp** in Laravel 5.4, because **elixir** is replaced with **mix** in L5.4. You need to use `$ npm run (dev | production)` – Vaibhavraj Roham Feb 20 '17 at 11:27
@VaibhavrajRoham what this statment does exactly? – Feb 20 '17 at 11:37
Hey @blablablablablabla , i think Roham is right, i will a update my answer . you should use npm run dev to compile locally your assets and watch for changes . – Abdou Tahiri Feb 20 '17 at 11:39
In short it compiles all your js & css files and merges into single js and css file. – Vaibhavraj Roham Feb 20 '17 at 11:39
@AbdouTahiri so it seems to me that it compile the BootStrap .sass into the ".../public/css/app.css" file. So it means that I can import this app.css file into my view and use the Bootstrap classes? Is it or am I missing something? – Feb 20 '17 at 11:41
@VaibhavrajRoham Is it? (previous comment). Tnx so much – Feb 20 '17 at 11:42
Yes, its exactly ! – Abdou Tahiri Feb 20 '17 at 11:43
Yes! It reduces application loading time and reduces subsequent requests. – Vaibhavraj Roham Feb 20 '17 at 11:50

score 1 · Answer 3 · answered Apr 20 '20 at 17:49

****Bootstrap 4 can be easily installed with following steps.****

Step 1 — Remove existing bootstrap

Uninstall Bootstrap

npm uninstall --save-dev bootstrap-sass

Step 2 — Install Bootstrap 4

Install Bootstrap 4 beta and popperjs

npm install --save-dev bootstrap@^4.0.0-beta.2 popper.js

Step 3 — Update code references

In resources/assets/js/bootstrap.js replace

try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap-sass');
} catch (e) {}

with

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('popper.js').default;
    require('bootstrap');
} catch (e) {}

In resources/assets/sass/app.scss replace

@import “~bootstrap-sass/assets/stylesheets/bootstrap”

with

@import “~bootstrap/scss/bootstrap.scss”

In resources/assets/sass/_variable.scss replace

$font-size-base: 14px;

with

$font-size-base: 0.875rem;

Step 4 — Recompile Assets Run

npm run dev

Now you have removed all Bootstrap 3 references and installed Bootstrap 4

score 0 · Answer 4 · answered May 08 '20 at 09:02

This worked for me:

run php artisan preset bootstrap
install node.js if not from the official website
- run npm install
run npm run dev

And use these at your HTML:

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

<script src="{{ asset('js/app.js') }}"></script>

How correctly install latest Bootstrap version into my Laravel 5.4 web application?

4 Answers4