Laravel UI Bootstrap does not seem to be working

Question

I'm working with Laravel version 8.53.1 and I have tried these commands to install Bootstrap authentication with Laravel:

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

But now the problem is the Login & Register blades do not read Bootstrap, and the forms look like this:

I have even repeated running the command several times, but still, the problem exists! What's going wrong here?

composer.json

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "php": "^7.3|^8.0",
        "fideloper/proxy": "^4.4",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/framework": "^8.40",
        "laravel/tinker": "^2.5",
        "laravel/ui": "^3.4",
        "maatwebsite/excel": "^3.1"
    },
    "require-dev": {
        "facade/ignition": "^2.5",
        "fakerphp/faker": "^1.9.1",
        "laravel/sail": "^1.0.1",
        "mockery/mockery": "^1.4.2",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.3.3"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "axios": "^0.21",
        "bootstrap": "^5.1.3",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^4.0.0",
        "sass": "^1.32.11",
        "sass-loader": "^11.0.1"
    }
}

So how can I solve this issue? I have also tried removing caches by running php artisan cache:clear and php artisan view:clear, but it didn't solve the issue.

What **exactly** is not working? What have you tried to check why this is not working? — Nico Haase, Jan 01 '22 at 16:50
have you checked to see what css the layout is trying to load and if it is loading? — lagbox, Jan 01 '22 at 16:57

score 1 · Answer 1 · answered Jan 02 '22 at 00:34

When you run the first npm install && npm run dev, a message comes up to install an additional package/dependency and run npm run dev again. The steps are:

npm install resolve-url-loader@^4.0.0 --save-dev --legacy-peer-deps
npm run dev

A screenshot for the addtional package/dependency

Karl Hill · Answer 2 · 2022-01-02T00:14:04.347

The first time you run npm run dev on an install of Laravel with laravel/ui and Bootstrap packages, it will not compile the assets. Instead, you'll get a message like the following.

Additional dependencies must be installed. This will only take a moment. Running: npm install resolve-url-loader@^4.0.0 --save-dev --legacy-peer-deps Finished. Please run Mix again.

The message asks you to run Laravel Mix once more. Run npm run dev again to finish compiling the assets.

Laravel UI Bootstrap does not seem to be working

2 Answers2