How to align center modal bootstrap 4? - css

Question

im have a litle problem here, i want to make modal showing center.
i want to make it like this
instead of showing like that, im getting this
this 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%;
}

Answer 1

You can add this in your own css script
.modal-dialog {
min-width:300px; //Min width in pixel
max-width:800px; //Max width in pixel
}
Remember to keep your css script after the bootstrap.css

Answer 2

Your modal-dialog class set a maximum width to your modal. Remove the class or change the max-width property.

Answer 3

<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-6">
<img src="1x/lawang_sewu2.jpg" style="width: 350px; height: 500px; object-fit: cover;">
</div>
<div class="col-6">
<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>
add col-6 to your modal.