Skip to content

All topics  /  Laravel

Laravel Livewire Bootstrap Modal Example

Laravel ·

When “Laravel Livewire Bootstrap Modal Example” moves through design, development and browser testing, the official product overview can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with Bootstrap before adopting it in production.

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. 

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

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: 

app/Http/Livewire/BootstrapModal.php
resources/views/livewire/bootstrap-modal.blade.php

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

app/Http/Livewire/BootstrapModal.php 

<?php
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.

routes/web.php 

Route::view('boostrap-modal','livewire.home');

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.

resources/views/livewire/bootstrap-modal.blade.php 

<div>
    <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 - NiceSnippets.com</strong></h5>
                </div>
                <div class="card-body">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                        Open Modal
                    </button>
                    <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>
                                    </button>
                                </div>
                               <div class="modal-body">
                                    Laravel Livewire Bootstrap Modal Example - NiceSnippets.com
                                </div>
                                <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>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

resources/views/livewire/home.blade.php 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    @livewireStyles
</head>
<body>
    @livewire('bootstrap-modal')
    @livewireScripts
</body>
</html>

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: 

http://localhost:8000/boostrap-modal

It will help you..

Preview

More on this topic