Download the PHP package hostmoz/blade-bootstrap-components without Composer

Blade Bootstrap Components

A set of Blade components designed to rapidly build forms and UI elements using Bootstrap 5.

Features

• Rich Form Components: Inputs, Textarea, Select, Checkbox, Radio, File Upload, Password (with toggle), Submit Button, Labels, Form Groups, Error display.
• Advanced Form Inputs: Includes components for Date Pickers (date-picker, datepicker, date-time-picker), Select2, SummerNote editor, Trix editor, Tag inputs, AutoComplete, Dual Listbox, and more.
• Livewire Modals (Bootstrap 5):
  • Provides a dynamic modal system powered by Livewire and AlpineJS, styled with Bootstrap 5.
  • Open modals, pass parameters (with automatic model binding), and manage state effortlessly.
  • Inspired by wire-elements/modal but adapted for Bootstrap.
  • Configure modal behavior (max width, close on escape/click away) per modal component.
• Other UI Elements: Delete Button component.
• Livewire Integration: Provides a dependent-selects component for cascading dropdowns.
• Automatic Old Input & Errors: Components automatically handle re-populating forms with old input and displaying validation errors.
• Form Method Spoofing: Automatically handles form method spoofing for PUT, PATCH, DELETE requests.
• Highly Customizable: Publish and modify component views, component classes, and configuration.
• Configurable Prefix: Use the default bootstrap:: prefix or define your own.

Requirements

• PHP 7.4+
• Laravel 8+
• Bootstrap 5 (CSS/JS must be included separately in your project)
• Livewire v3

Installation

You can install the package via composer:

Setup

1. Publish Assets (Required for JS Components):

2. Add Livewire Modal Component Directive: Add <livewire:bootstrap-modal /> (or @livewire('bootstrap-modal')) to your main layout file (usually app.blade.php), typically just before the closing </body> tag.

3. Publish Configuration (Optional):

   Customize settings in config/blade-bootstrap-components.php (e.g., prefix, default JS include).

Usage

Standard Components

Components are used with the syntax <x-prefix::directory.component-name />.

Default Prefix Example (bootstrap):

Livewire Modals (Bootstrap 5 Style)

1. Create a Modal Component: Create a Livewire component that extends Hostmoz\BladeBootstrapComponents\Contracts\ModalComponent.

   Modal View (resources/views/livewire/edit-user-modal.blade.php):

2. Trigger the Modal: Dispatch the openModal event.

Dependent Selects (Livewire)

Refer to the component source files in vendor/hostmoz/blade-bootstrap-components/resources/views/ for available attributes and slots.

Customization

You can customize the look and behavior of the components:

1. Configuration: Publish the config file as shown in the Setup section.

2. Views: Publish the Blade views to modify the HTML structure:

   The views will be placed in resources/views/vendor/blade-bootstrap-components/.

Testing

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

• Elísio Leonardo
• All Contributors

License

The MIT License (MIT). Please see License File for more information.