Laravel Livewire Bootstrap Modal Example




Laravel Livewire Bootstrap Modal Example

Hello Friends,

In this blog, I would like to share with you how to open bootstrap modal livewire in laravel application.I will show you a complete example for open boostrap modal example with laravel livewire.

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.Livewire relies solely on AJAX requests to do all its server communicaton.

Here I will give full example for how to open bootstrap modal in laravel livewire,So Lets follow the bellow step.

Step 1 : Install Laravel App

In First step, We need to get fresh laravel version application using bellow command. So Let's open terminal and run bellow command.

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Setup Database Configuration

After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.







Step 3 : Install Livewire

In this step, You will simply install livewire to our laravel application using bellow command:

composer require livewire/livewire

Step 4 : Create Component

Now, You can create livewire component using bellow command, So Let's run bellow command to create user form component:

php artisan make:livewire bootstrap-modal

Now they created fies on both path:



Now first file we will update as bellow for BootstrapModal.php file.



namespace App\Http\Livewire;

use Livewire\Component;

use App\User;

class BootstrapModal extends Component


public function render()


return view('livewire.bootstrap-modal');



Step 5 : Add Route

now, we need to add route for open modal in laravel application. so open your "routes/web.php" file and add following route.



Step 6 : Create View

Here, we will create blade file for call modal route. in this file we will use @livewireStyles, @livewireScripts and @livewire('bootstrap-modal'). so let's add it.



<div class="row mt-5">

<div class="col-md-6 offset-3">

<div class="card">

<div class="card-header bg-info text-white">

<h5><strong>Laravel Livewire Bootstrap Modal Example -</strong></h5>


<div class="card-body">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">

Open Modal


<div wire:ignore.self class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true close-btn">×</span>



<div class="modal-body">

Laravel Livewire Bootstrap Modal Example -


<div class="modal-footer">

<button type="button" class="btn btn-secondary close-btn" data-dismiss="modal">Close</button>

<button type="button" wire:click.prevent="store()" class="btn btn-primary close-modal">Save</button>











<!DOCTYPE html>




<link rel="stylesheet" href="">

<script src=""></script>

<script src=""></script>








Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:


It will help you..


#Laravel 8

#Laravel 7


#Laravel 6