Search code examples
cssbootstrap-4modal-dialogbootstrap-modal

Image spills out of bootstrap modal

I'm creating a modal window using bootstrap to show some text with an image. Problem is the image spills out of the modal. I've tried adding responsive class to the image but it did not worked.

<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="modalBasic">
  <div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">Upgrade to Basic</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Modal body text goes here.</p>
    <img src="./img/upi.jpg" class="img-responsive"/>
  </div>
    </div>
  </div>
</div>

I've tried removing modal-sm class, but it failed on small screen.

Large screen

Small screen

Solution

  • Set the image's width property to 100% or add CSS property .img-responsive { width: 100%; }

    What you want to achieve is image should resize according to the width of the modal. Therefore image's width should adhere to the modal's width.

    Working example: https://codesandbox.io/s/sharp-villani-1lsjw5?file=/index.html:2228-2298&resolutionWidth=456&resolutionHeight=675