My navigation bar has a button that, when clicked, triggers a modal to appear at the top of the page. I am trying to center it horizontally.
Here is the HTML code:
</button>
<!-- </button> -->
<div class="text-dark ">
<!-- 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-dialog align-items-center d-flex">
<div class="modal-content ">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Log in</h1>
<button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-start">
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Name</label>
<input type="text" class="form-control text-dark" id="exampleInputEmail1" aria-describedby="emailHelp" required>
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email</label>
<input type="email" class="form-control text-dark" id="exampleInputEmail1" aria-describedby="emailHelp" required>
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control text-dark" id="exampleInputPassword1" required>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
I have tried changing the CSS and adding "mt-5" but the modal still does not center horizontally as I want.