Make a Bootstrap modal window the same width as the image inside it

To make a Bootstrap modal window the same width as the image inside it, you need to override the default Bootstrap modal width with custom CSS and ensure the image is configured to control its container's size. You can achieve this by targeting the .modal-dialog element.
CSS • HTML

html

<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-image-fit"> <!-- Custom class added here -->
    <div class="modal-content">
      <div class="modal-body p-0"> <!-- Removed padding for the image -->
        <img src="your-image-url.jpg" class="img-fluid" alt="Modal image">
      </div>
    </div>
  </div>
</div>

css

modal-image-fit {
  max-width: fit-content; /* Modern approach to fit content width */
  width: auto;            /* Ensures it works well with max-width */
}

Written by fbrefere001

Posted by fbrefere001 on Thursday January 22, 2026