How To Add Bootstrap Modal In Laravel

Today i will show you how to add bootstrape popup modal on button click.many times we need to set confirmation on alert box using javascript but now bootstrape provide us facilites like bootstrap modal, it is very simple to use.

Just you need to add latest javascript CDN and bootstrap CDN, some other JS thats it. So, Add below code in your PHP or Laravel blade file and get output.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Modal Example in Laravel - Websolutionstuff</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
    crossorigin="anonymous">
</head>
<body>
    <br>
    <h3>Bootstrap Modal Example in Laravel - Websolutionstuff</h3>
    <form method="post" action="#">
    <br><br>
      <table class="table-bordered table-striped" width="50%">
        <thead>
          <tr>
            <th class="text-center">No.</th>
            <th class="text-center">Name</th>
            <th class="text-center"> Example</th>
          </tr>
        </thead>
        <tbody>
         <tr>
            <td class="text-center">1</td>
            <td class="text-center">Admin</td>
            <td class="text-center"><button type="button" class="btn btn-primary m-2" data- 
            toggle="modal" data-target="#demoModal">Click Here</button> </td>
         </tr>
         <tr>
            <td class="text-center">2</td>
            <td class="text-center">Test</td>
            <td class="text-center"><button type="button" class="btn btn-primary m-2" data- 
            toggle="modal" data-target="#demoModal">Click Here</button> </td>
         </tr>
        </tbody>

        <!-- Modal Example Start-->
            <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria- 
            labelledby="demoModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="demoModalLabel">Modal Example - 
                             Websolutionstuff</h5>
                                <button type="button" class="close" data-dismiss="modal" aria- 
                                label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                        </div>
                        <div class="modal-body">
                                Welcome, Websolutionstuff !!
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data- 
                            dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save 
                                changes</button>
                        </div>
                    </div>
                </div>
            </div>
     <!-- Modal Example End-->
            </table>
            <br>
        </form>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

websolutionstuff

websolutionstuff

How To Add Bootstrap Modal In Laravel