CODEWITHSUNDEEP
htmlcss
ShaneOG97
ShaneOG97

Reputation: 530

How to a center and enlarge a bootstrap dialog in google maps

I have a bootstrap dialog that is being displayed in google maps:

enter image description here

I want to be able to show the dialog at the center of the map as opposed to the top and increase the width and height of it. So far the styling for width is the only thing that appears to take effect. Here is my code:

HTML, CSS and JS:

$('#myModal').modal('show');
    html, body {
     height: 100%;
     margin: 0;
     padding: 0;
    }

    #map_canvas {
     height: 100%;
    }
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">
        <div class="modal-dialog " style="width: 30%" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Title</h4>
                </div>
                <div class="modal-body">
                    Test
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                    <button type="button" class="btn btn-primary">Yes</button>
                </div>
            </div>
        </div>
    </div>

Upvotes: 0

Views: 77

Answers (1)

GucciBananaKing99
GucciBananaKing99

Reputation: 1506

Here's a centered Bootstrap 5 Modal!

You have to add the class "modal-dialog-centered" to the "modal-dialog" class.

Here's a picture to make everything a bit more understandable:

modal-dialog-centered

Here's the code:

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This modal is centered horizontally and vertically! 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions