bootstrap show modal on page load

To show a Bootstrap modal on page load, you can use the Bootstrap JavaScript API. Here's an example of how you can achieve this:

  1. First, make sure you have included the necessary Bootstrap CSS and JavaScript files in your HTML document.

  2. Add a modal markup to your HTML document. For example:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Modal content goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
  1. Add the following JavaScript code to your HTML document to show the modal on page load:
<script>
  $(document).ready(function() {
    $('#myModal').modal('show');
  });
</script>

Make sure you have included the jQuery library and the Bootstrap JavaScript file before this code.

That's it! The modal will be displayed automatically when the page loads. Remember to customize the modal content and styling according to your needs.

Please note that the code provided assumes you have already included the necessary dependencies and have a basic understanding of Bootstrap.