Twitter Bootstrap Question posted in

Using bootstrap in laravel-Twitter bootstrap

i tried to use twitter bootstrap in Laravel 8, but after manual, bootstrap JS(?) dont work. CSS are loaded and styles work but dropdowns etc not. When i hit dropdown menu item nothin happen.

I did:

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

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

However when i insert just CDN links everythin works ofc. What did i wrong?

I created new app and have same issue.
Laravel v8.28.1, tried like 5 bootstrap/laravel tutorials, always same result.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Ok i did it, the problem wasnt JS, but bootstrap versions. Laravel ui bootstrap installs 4.0 and examples (i copypasted menu example) on bootstrap page are dedicated now for bootstrap 5 beta where data-toggle="dropdown" has been changed to data-bs-toggle="dropdown" as i see.


  2. 0

    complete tutorial to follow: (you need to compile JavaScript)

    https://www.positronx.io/how-to-properly-install-and-use-bootstrap-in-laravel/

    Login or Signup to reply.
  3. 0

    for the same following are the steps for same

    Installation
    The Bootstrap and Vue scaffolding provided by Laravel is located in the laravel/ui Composer package, which may be installed using Composer:

    composer require laravel/ui

    Once the laravel/ui package has been installed, you may install the frontend scaffolding using the ui Artisan command:

    // Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

    // Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

    Before compiling your CSS, install your project’s frontend dependencies using the Node package manager (NPM):

    npm install

    Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file. Typically, your compiled CSS will be placed in the public/css directory:

    npm run dev

    The webpack.mix.js file included with Laravel’s frontend scaffolding will compile the resources/sass/app.scss SASS file. This app.scss file imports a file of SASS variables and loads Bootstrap, which provides a good starting point for most applications. Feel free to customize the app.scss file however you wish or even use an entirely different pre-processor by configuring Laravel Mix.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search