'How to align center modal bootstrap 4?

im have a litle problem here, i want to make modal showing center.
i want to make it like this enter image description here instead of showing like that, im getting this enter image description here 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">&times;</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%;
}
cssbootstrap-4modal-dialogbootstrap-modal


Solution 1:[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

Solution 2:[2]

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

Solution 3:[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">&times;</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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gerard Haw
Solution 2
Solution 3 Pinal Sukhadiya

Related Questions