How To Add Bootstrap 5 Modal Popup In Laravel 9

Websolutionstuff | Nov-02-2022 | Categories : Laravel jQuery Bootstrap

In this article, we will see how to add bootstrap 5 modal popup in laravel 9. We will learn how to use the bootstrap 5 modal popup open using the on button click in laravel 9. Bootstrap 5 modals are built with HTML, jQuery, and CSS. Bootstrap supports one modal window at a time. For the bootstrap 5 modal popup, we will add the latest javascript CDN and bootstrap 5 CDN file. Also, you can close the modal using the data-bs-dismiss attribute. and bootstrap 5 modal popups use the fixed position.

Also, you can add animation to the modals. Change the size of the modal to small, large, and extra large using the bootstrap 5 classes.

So, let's see laravel 9 add bootstrap 5 modal popup, jquery bootstrap 5 modal popup, and how to use bootstrap 5 modal popup in laravel 9.

First, we will add bootstrap 5 CSS and Javascript files in the <head> tag.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>How To Add Bootstrap 5 Modal Popup In Laravel 9 - Websolutionstuff</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <div class="container mt-3">
            <h3>How To Use Bootstrap 5 Modal Popup In Laravel 9 Example - Websolutionstuff</h3>
            <p>Click on the button to open the modal.</p>
            
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
                Open modal
            </button>
        </div>
        <!-- The Modal -->
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Modal Heading</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        Modal body..
                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

 

 

Output:

how_to_add_bootstrap_5_modal_popup_in_laravel_9_output

 

Add Animation In Bootstrap 5 Modal

Using the .fade class to add a fade effect on the modal when it close and opens. For fade effect, add fade class with modal class.

<!-- Fading modal -->
<div class="modal fade"></div>

<!-- Modal without animation -->
<div class="modal"></div>

 

Add Size in Bootstrap 5 Modal

Change the different sizes of modals using the bootstrap 5 classes. Add the size class to the <div> element with class .modal-dialog.

Size Class Modal max-width
Small .modal-sm 300px
Default None 500px
Large .modal-lg 800px
Extra large .modal-xl 1140px

 

// Small Modal
<div class="modal-dialog modal-sm">

// Large Modal
<div class="modal-dialog modal-lg">

// Extra Large Modal
<div class="modal-dialog modal-xl">

 

Fullscreen Modal

Display a modal popup with fullscreen using the bootstrap 5 modal-fullscreen class. And classes are placed on a .modal-dialog.

// Fullscreen Modal
<div class="modal-dialog modal-fullscreen">
Class Availability
.modal-fullscreen Always
.modal-fullscreen-sm-down Below 576px
.modal-fullscreen-md-down Below 768px
.modal-fullscreen-lg-down Below 992px
.modal-fullscreen-xl-down Below 1200px
.modal-fullscreen-xxl-down Below 1400px

 


You might also like:

Recommended Post
Featured Post
How To Send Email In Laravel 9 Using Mailgun
How To Send Email In Laravel 9...

In this article, how to send email in laravel 9 using mailgun. we will learn laravel 9 to send emails using mailgun...

Read More

Jul-29-2022

Laravel 8 User Roles and Permissions Without Package
Laravel 8 User Roles and Permi...

In this tutorial we will see laravel 8 user roles and permissions without package.Roles and permissions are an impo...

Read More

Sep-13-2021

How To Get Client IP Address In Laravel 9
How To Get Client IP Address I...

In this article, we will see how to get a client's IP address in laravel 9. Many times you need a user IP addre...

Read More

Oct-26-2022

How To Hide Toolbar In Summernote Editor
How To Hide Toolbar In Summern...

In this small tutorial i will show you How To Hide Toolbar In Summernote Editor, many times customer's have req...

Read More

Sep-02-2020