- How do I install wire-bootstrap in a Laravel application?
- Install the package with Composer using composer require rishadblack/wire-bootstrap, then run the package's one-command setup to publish assets and views as needed. Import the provided wire-bootstrap.scss layer after your vendor styles in resources/scss/app.scss and rebuild your frontend with npm run build. New installs using the installer stub typically receive the SCSS import automatically, while existing apps must add it manually.
- Which Laravel, PHP, Livewire, and Bootstrap versions does wire-bootstrap support?
- wire-bootstrap targets Laravel applications built on Blade and Livewire with a Bootstrap 5.3 design system. Because version constraints can change between releases, check the require block in the package's composer.json against your app's Laravel, PHP, and Livewire versions before upgrading. Bootstrap 5.3 is the key baseline since the SCSS theme layer relies on Bootstrap CSS variables.
- Does wire-bootstrap work with Tailwind CSS or Bootstrap 4?
- The package is designed for Bootstrap 5.3, so Tailwind and Bootstrap 4 projects are not the primary target. The base date-picker behavior may still function on other stacks, but the SCSS theme layer that maps flatpickr surfaces to Bootstrap variables expects Bootstrap 5.3 CSS variables. Older Bootstrap versions may degrade gracefully or need a custom fallback stylesheet.
- Why is my flatpickr date picker unstyled or white in dark mode?
- The most common cause is a missing or misordered wire-bootstrap.scss import in resources/scss/app.scss. The theme layer must be imported after vendor styles so it can map flatpickr surfaces to Bootstrap CSS variables in both light and dark mode. Also confirm your built assets are fresh and that you republished assets if the package update required it.
- Is the wire-bootstrap.scss theme layer optional or always published?
- The SCSS theme layer is what makes flatpickr match your Bootstrap 5.3 styling, so it is effectively part of the intended setup. New installs get the import added to the installer's app.scss stub, but existing applications must add the import manually after upgrading. If you skip it, date and time pickers may render unstyled, especially in dark mode.
- Does wire-bootstrap support Vite and standard Laravel asset publishing?
- Yes, integration follows the standard Laravel workflow: Composer install, publish package assets and views as needed, add the SCSS import, and rebuild with Vite. The package does not require database migrations, so the operational footprint is limited to frontend assets. Just ensure your Vite pipeline actually compiles the package SCSS, otherwise the theme will silently be missing.
- What happens if the $primary SCSS variable is undefined?
- The theme layer maps flatpickr UI surfaces to Bootstrap CSS variables, including $primary, so an undefined variable can result in fallback colors or a Sass build error. Define $primary before importing Bootstrap and the package styles in your app.scss to keep theming predictable. If you need a fallback, set an explicit default value so builds do not break when the variable is absent.
- How do single-tag form fields handle labels, validation errors, and loading states?
- wire-bootstrap ships Blade components that render a full form field from a single tag, including the label, Livewire model binding, validation error display, and loading state. This reduces markup and keeps styling consistent across your forms. The components are built for Livewire, so binding and error state follow your existing Livewire validation flow.
- Can I use wire-bootstrap for modals, alerts, buttons, and tables as well as forms?
- Yes, the package provides reusable Blade UI elements for forms, buttons, modals, alerts, and tables, all styled with Bootstrap 5.3. The goal is to build responsive, dynamic interfaces with less markup while keeping styling consistent. Forms and date/time inputs are the most tightly integrated with Livewire bindings and validation.
- How should I test and QA wire-bootstrap before deploying?
- Run npm run build, then manually verify date, range, today, month/year, week-number, and time-picker states in both light and dark mode. Check your $primary theming, mobile behavior, and any CSS specificity conflicts with existing app styles. Because the theme is a CSS layer, visual regression checks are more valuable than backend tests here, and stale published assets are a common source of false failures.