Laravel 5.5中Bootstrap 3升级至Bootstrap 4的配置与引用问题

Hey there! Let me walk you through upgrading your Laravel 5.5 project from Bootstrap 3 to Bootstrap 4 step by step—you’re on the right track with the composer dependencies, but there’s a bit more to tie everything together and clean up old references.

First, let’s swap out the old Bootstrap 3 package for Bootstrap 4 and its required dependency, Popper.js:

• Remove the old bootstrap-sass package:

  composer remove bootstrap-sass
  

• Install Bootstrap 4 and Popper.js:

  composer require bootstrap:4.0.0 popper.js:^1.12.6
  

Popper.js is mandatory for Bootstrap 4’s dropdowns, tooltips, and popovers to work correctly—don’t skip this!

Laravel 5.5 uses Laravel Mix to compile assets, so we need to update your configuration and core asset files:

Update Your SCSS File #

Open resources/assets/sass/app.scss (your main styles entry point). Replace the Bootstrap 3 import with the Bootstrap 4 version:

// Before:
// @import "bootstrap-sass/assets/stylesheets/bootstrap";

// After:
@import "bootstrap/scss/bootstrap";

If you’ve customized Bootstrap variables (like brand colors), note that Bootstrap 4 simplified naming—for example, $brand-primary becomes $primary, $brand-success becomes $success. Update these to match the new convention.

Update Your JavaScript File #

Open resources/assets/js/app.js to load Popper.js and Bootstrap 4’s JS components properly:

// Before:
// require('bootstrap-sass');

// After:
window.Popper = require('popper.js').default;
require('bootstrap');

This ensures Popper is available globally for Bootstrap’s interactive components.

Recompile Assets #

Run this command to build your updated CSS and JS:

npm run dev

For production environments, use npm run prod instead to minify assets.

Now let’s track down all places where your app uses Bootstrap 3-specific code:

• Blade Views: Check every .blade.php file for outdated classes:

  • panel → card (for content boxes)
  • btn-default → btn-secondary
  • navbar-default → navbar-light or navbar-dark (match your theme)
  • form-horizontal → Use Bootstrap 4’s grid system for horizontal forms instead
  • form-control-static → form-control-plaintext
  • Note: While col-md-* still works, Bootstrap 4 uses flexbox, so utilities like pull-right are replaced with float-right

• Custom CSS/SCSS: Look for hardcoded Bootstrap 3 variables or class overrides—update these to align with Bootstrap 4’s structure.

• JavaScript: If you’ve written custom JS that uses Bootstrap 3’s component APIs (like modal events), most events still work, but some methods have changed. Test dropdowns, modals, and tooltips to ensure they function as expected.

• Layout Files: In your main layout (usually resources/views/layouts/app.blade.php), confirm you’re loading the compiled app.css and app.js—remove any old Bootstrap 3 CDN links or local file references.

Fire up your local server with php artisan serve and click through every page of your app. Check for:

• Broken styles (misaligned elements, missing spacing)
• Non-functional JS components (dropdowns not opening, modals not popping up)
• Responsive behavior (Bootstrap 4’s flex-based grid might need minor mobile layout tweaks)

内容的提问来源于stack exchange，提问作者Raj