Bootstrap Laravel Package

Getting Started

Start by installing Bootstrap via Composer (composer require twbs/bootstrap@^5.3.8). Unlike earlier versions, this package includes compiled CSS/JS and source SCSS/CSS. In Laravel, publish the config and assets using php artisan vendor:publish --tag=bootstrap (if a service provider is provided) or manually link assets in your resources/css/app.css (e.g., @import 'bootstrap/scss/bootstrap';). Compile with Vite or Mix. First use case: enable responsive layouts by adding the Bootstrap container and grid classes to a Blade template (e.g., <div class="container">...</div>).

Note: For development, ensure your local Sass compiler watches for changes (fixed in v5.3.8 with improved SCSS autorecompile).

Implementation Patterns

• Component-driven templating: Use Bootstrap’s prebuilt components (modals, navbars, alerts) directly in Blade views—paste HTML/CSS from the official docs. For example:

  <div x-data="{ open: false }" @click.away="open = false">
    <button @click="open = true">Toggle Modal</button>
    <div x-show="open" style="display: none;" @click.stop>
      <div class="modal" style="display: block;">
        <!-- Modal content -->
      </div>
    </div>
  </div>
  

• Theme customization: Override Bootstrap variables in resources/sass/_variables.scss before importing Bootstrap SCSS (e.g., @import 'bootstrap/scss/bootstrap';). Leverage the updated color-contrast() function for WCAG 2.1 compliance:

  $primary: #0d6efd;
  $primary-rgb: rgb_var($primary);
  $primary-contrast: color-contrast($primary-rgb);
  

• JS enhancements: Import Bootstrap’s JS modules individually in resources/js/app.js to optimize builds:

  import { Modal, Tooltip } from 'bootstrap';
  

• Integration with Livewire/Alpine: Bind Bootstrap components via Alpine’s reactivity or Livewire events. Example for modals:

  // Livewire
  $wire.on('modal.show', (id) => new bootstrap.Modal(`#${id}`).show());
  

• Accessibility improvements: Use the updated color-contrast() function to ensure WCAG compliance in custom themes.

Gotchas and Tips

• SCSS import order matters: Always define custom variables before @import 'bootstrap/scss/bootstrap'; to override defaults. The color-contrast() function now requires RGB values (e.g., rgb_var($primary)).
• Popper dependency: Bootstrap 5+ bundles Popper internally—avoid separate @popperjs/core installations unless using custom builds.
• Minified vs. source files: Prefer dist/css/bootstrap.min.css for production, but use scss/ for customization. The dist/ files are now unminified in downloadable examples (v5.3.8).
• CSP & nonce compatibility: Bootstrap’s JS uses eval() in fallbacks. For strict CSP, use non-eval builds or whitelist 'unsafe-eval'.
• Spinner distortion fix: If spinners appear distorted in flex containers with multiline content, update to v5.3.8 (includes PR #41654).
• Dropdown focus revert: A regression in v5.3.7 (focus returning to dropdown triggers) was reverted in v5.3.8 (PR #41668). No action required unless you relied on the broken behavior.
• Themes removal: Bootstrap’s docs no longer include themes (PR #41671). For custom themes, use the SCSS variables system.
• Search input cursor: The search input cancel button now has a cursor: pointer by default (v5.3.8, PR #41639).