PHPackages                             hostmoz/blade-bootstrap-components - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. hostmoz/blade-bootstrap-components

ActiveLibrary[Templating & Views](/categories/templating)

hostmoz/blade-bootstrap-components
==================================

A set of Blade Components based on Boostrap-4 CSS Framework

1.1.0(1y ago)7785↓100%5MITJavaScriptPHP >=7.3

Since Sep 10Pushed 5mo ago1 watchersCompare

[ Source](https://github.com/hostmoz/blade-bootstrap-components)[ Packagist](https://packagist.org/packages/hostmoz/blade-bootstrap-components)[ Docs](https://github.com/hostmoz/blade-bootstrap-components)[ RSS](/packages/hostmoz-blade-bootstrap-components/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (4)Dependencies (4)Versions (6)Used By (0)

Blade Bootstrap Components
==========================

[](#blade-bootstrap-components)

[![Latest Version on Packagist](https://camo.githubusercontent.com/934ee8806c67ebe4f74daebdef0b343fa437656eb20ed01f10da4b3bb2709cb7/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f686f73746d6f7a2f626c6164652d626f6f7473747261702d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/hostmoz/blade-bootstrap-components)[![Build Status](https://camo.githubusercontent.com/0fa1ba133b7ac55fea3e898e85f92332dcae8b60e0e49c5e65d42d3ea6efecbf/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f686f73746d6f7a2f626c6164652d626f6f7473747261702d636f6d706f6e656e74732f6d61737465722e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/hostmoz/blade-bootstrap-components)[![Quality Score](https://camo.githubusercontent.com/5ba463796207de3a43febad5ab13d1d60ba14073f08ef6f6ec63e03f4e809182/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f672f686f73746d6f7a2f626c6164652d626f6f7473747261702d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265)](https://scrutinizer-ci.com/g/hostmoz/blade-bootstrap-components)[![Total Downloads](https://camo.githubusercontent.com/c8096ff3f59c386ee02c6dde5612c489de75fa953037e8fb06302557d0379866/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f686f73746d6f7a2f626c6164652d626f6f7473747261702d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/hostmoz/blade-bootstrap-components)

A set of Blade components designed to rapidly build forms and UI elements using [Bootstrap 5](https://getbootstrap.com/docs/5.0/getting-started/introduction/).

Features
--------

[](#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](https://laravel.com/docs/requests#old-input) and displaying [validation errors](https://laravel.com/docs/validation#quick-displaying-the-validation-errors).
- **Form Method Spoofing:** Automatically handles [form method spoofing](https://laravel.com/docs/routing#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
------------

[](#requirements)

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

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require hostmoz/blade-bootstrap-components
```

Setup
-----

[](#setup)

1. **Publish Assets (Required for JS Components):**

    ```
    php artisan vendor:publish --tag=bootstrap-assets --force
    ```
2. **Add Livewire Modal Component Directive:** Add `` (or `@livewire('bootstrap-modal')`) to your main layout file (usually `app.blade.php`), typically just before the closing `` tag.

    ```

        {{-- ... head content ... --}}
        @livewireStyles
        @vite(['resources/css/app.css', 'resources/js/app.js']) {{-- Or your asset bundling --}}

        {{ $slot }} {{-- Or @yield('content') --}}

        @livewireScripts
        @livewire('bootstrap-modal') {{-- Or  --}}

    ```
3. **Publish Configuration (Optional):**

    ```
    php artisan vendor:publish --tag=bootstrap-config
    ```

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

Usage
-----

[](#usage)

### Standard Components

[](#standard-components)

Components are used with the syntax ``.

**Default Prefix Example (`bootstrap`):**

```
{{-- Basic Form --}}

```

### Livewire Modals (Bootstrap 5 Style)

[](#livewire-modals-bootstrap-5-style)

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

    ```
    php artisan make:livewire EditUserModal
    ```

    ```