PHPackages                             mantix/livewire-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. mantix/livewire-bootstrap-components

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

mantix/livewire-bootstrap-components
====================================

Reusable Livewire Bootstrap components by Mantix BV

v1.25(2mo ago)1604MITBladePHP ^8.0

Since Jul 30Pushed 2mo agoCompare

[ Source](https://github.com/Mantix/livewire-bootstrap-components)[ Packagist](https://packagist.org/packages/mantix/livewire-bootstrap-components)[ RSS](/packages/mantix-livewire-bootstrap-components/feed)WikiDiscussions main Synced today

READMEChangelog (10)Dependencies (2)Versions (27)Used By (0)

Livewire Bootstrap Components
=============================

[](#livewire-bootstrap-components)

Reusable Livewire Bootstrap components by Mantix BV.

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

[](#installation)

```
composer require mantix/livewire-bootstrap-components
```

Usage
-----

[](#usage)

Publish the views and styles (optional):

```
# Publish views
php artisan vendor:publish --provider="Mantix\\LivewireBootstrapComponents\\LivewireBootstrapComponentsServiceProvider" --tag=views

# Publish SCSS files
php artisan vendor:publish --provider="Mantix\\LivewireBootstrapComponents\\LivewireBootstrapComponentsServiceProvider" --tag=scss
```

Components
----------

[](#components)

### Card Component

[](#card-component)

A flexible card component with customizable styling and optional header/footer.

```

    Card content here.

```

**Attributes:**

- `title` (string, optional): Card header title
- `square` (boolean, default: false): Apply square styling
- `background_image` (string, optional): Background image URL
- `background_color` (string, optional): Bootstrap background color class
- `text_color` (string, optional): Bootstrap text color class
- `footer` (string, optional): Footer content
- `actions` (array, optional): Array of action configurations (see Actions Component)

### Form Group Component

[](#form-group-component)

A form group wrapper with label, icon support, and automatic error handling.

```

```

**Attributes:**

- `label` (string, optional): Form field label
- `icon` (string, optional): FontAwesome icon name (without 'fa-' prefix)
- `required` (boolean, default: false): Show required asterisk

**Features:**

- Automatically detects `wire:model` and displays validation errors
- Supports input groups with icons
- Responsive design with proper spacing

### List Row Component

[](#list-row-component)

A list item component with flexible action buttons for CRUD operations.

```

    Item content here

```

**Attributes:**

- `class` (string, optional): Additional CSS classes
- `background_color` (string, optional): Bootstrap background color
- `text_color` (string, optional): Bootstrap text color
- `actions` (array, optional): Array of action configurations (see Actions Component)

**Action Configuration:**Each action in the `actions` array can have:

- `href` (string, optional): URL for regular links (use either `href` or `wire:click`)
- `wire:click` (string, optional): Livewire method name (use either `href` or `wire:click`)
- `icon` (string, optional, default: 'circle'): FontAwesome icon name (without 'fa-' prefix)
- `color` (string, optional, default: 'light'): Bootstrap button color class
- `label` (string, optional): Text label to display next to the icon
- `confirm` (string, optional): Confirmation message for `wire:click` actions

**Features:**

- Double-click to view or edit (automatically detects 'view' or 'edit' in wire:click methods)
- Responsive design: button group on desktop (md and up), dropdown menu on mobile
- Supports both regular links (`href`) and Livewire actions (`wire:click`)
- Confirmation dialogs for destructive actions

### Actions Component

[](#actions-component)

Shared action renderer used by cards and list rows. It accepts the same `actions` array format shown above and automatically builds responsive button groups (desktop) and dropdowns (mobile). You can also use it directly:

```

```

### Modal Component

[](#modal-component)

A complete modal component with form support and multiple levels.

```

    Modal content here

```

**Attributes:**

- `id` (string, required): Modal ID
- `size` (string, optional): Modal size (sm, lg, xl)
- `title` (string, required): Modal title
- `close_function` (string, optional): Livewire method to close modal
- `submit_function` (string, optional): Livewire method for form submission
- `submit_color` (string, optional): Submit button color (default: primary)
- `submit_text` (string, optional): Submit button text
- `submit_icon` (string, optional): Submit button icon
- `level` (integer, optional): Modal z-index level (1-5)

**Features:**

- ESC key support for closing
- Loading states on submit button
- Multiple z-index levels for nested modals
- Automatic form wrapper when submit function is provided

### Session Message Component

[](#session-message-component)

Displays session flash messages with different types.

```

```

**Features:**

- Displays `message` (info), `success`, and `danger` session messages
- Dismissible alerts with close buttons
- Automatic error display integration

### Errors Component

[](#errors-component)

Displays validation errors in a dismissible alert.

```

```

**Features:**

- Shows all validation errors in a single alert
- Dismissible with close button
- Automatically included in modal

Styles
------

[](#styles)

The package includes SCSS files for modal z-index management. After publishing the SCSS files, you can import them in your main SCSS file:

```
@import '../../vendor/mantix/livewire-bootstrap-components/resources/scss/livewire-bootstrap-components';
```

### Modal Z-Index Levels

[](#modal-z-index-levels)

The package provides 5 levels of modal z-index management:

- Level 1: Default Bootstrap modal (z-index: 1055)
- Level 2: z-index: 1065 (backdrop: 1060)
- Level 3: z-index: 1075 (backdrop: 1070)
- Level 4: z-index: 1085 (backdrop: 1080)
- Level 5: z-index: 1095 (backdrop: 1090)

Requirements
------------

[](#requirements)

- Laravel 8+
- Livewire 3.x
- Bootstrap 5.x
- FontAwesome 6.x

License
-------

[](#license)

MIT © Mantix BV

###  Health Score

45

—

FairBetter than 91% of packages

Maintenance88

Actively maintained with recent releases

Popularity20

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~11 days

Recently: every ~35 days

Total

26

Last Release

61d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/5512138?v=4)[Pieter Naber](/maintainers/Mantix)[@Mantix](https://github.com/Mantix)

---

Top Contributors

[![Mantix](https://avatars.githubusercontent.com/u/5512138?v=4)](https://github.com/Mantix "Mantix (31 commits)")

### Embed Badge

![Health badge](/badges/mantix-livewire-bootstrap-components/health.svg)

```
[![Health](https://phpackages.com/badges/mantix-livewire-bootstrap-components/health.svg)](https://phpackages.com/packages/mantix-livewire-bootstrap-components)
```

###  Alternatives

[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

725173.0k14](/packages/tallstackui-tallstackui)[filament/support

Core helper methods and foundation code for all Filament packages.

2331.0M245](/packages/filament-support)[yajra/laravel-datatables-export

Laravel DataTables Queued Export Plugin.

362.2M4](/packages/yajra-laravel-datatables-export)[mati365/ckeditor5-livewire

CKEditor 5 integration for Laravel Livewire

447.9k](/packages/mati365-ckeditor5-livewire)[wendelladriel/slidewire

Create beautiful presentations powered by Livewire

1342.9k](/packages/wendelladriel-slidewire)[enflow/livewire-twig

Enabling Livewire in Twig templates

2868.8k1](/packages/enflow-livewire-twig)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)