I'm facing a small issue here, I would like to have the modal display in the center. Instead of it appearing like this https://i.sstatic.net/R518w.jpg, I want it to look like this https://i.sstatic.net/wwUo7.jpg. Here is the code:
<!-- The Modal -->
<div class="modal fade" id="modal-first">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
<!-- Modal body -->
<div class="modal-body d-flex align-items-center">
<div class="row">
<div class="col">
<img src="1x/lawang_sewu2.jpg" style="width: 350px; height: 500px; object-fit: cover;">
</div>
<div class="col">
<p style="font-size: 36px; width: 250px;">Lawang Sewu</p>
<p style="width: auto; height: auto; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget ipsum ex. Integer pulvinar elementum fringilla. Fusce sollicitudin sed enim non elementum. Etiam sit amet turpis massa. Sed id posuere magna, sed molestie dolor. Vivamus at mauris malesuada, porttitor arcu in, auctor arcu. Sed efficitur, purus a molestie cursus, eros sapien volutpat purus, id accumsan nibh massa vitae augue. Sed fermentum, ex ut sodales auctor, neque ante malesuada eros, consectetur volutpat urna orci eget felis. Donec euismod scelerisque nisi ac dignissim. Phasellus eros libero, interdum ac arcu nec, venenatis maximus tortor. Nunc blandit tincidunt nulla. Mauris efficitur tincidunt lacus at ultricies. Maecenas dignissim quam malesuada eleifend blandit. In hac habitasse platea dictumst.</p>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
.modal-content{
padding: 5%;
}