How to resize Twitter Bootstrap modal dynamically based on the content

A CSS Govt. order for resizing

Let's send a letter use CSS to tell our modal's Kingdom (.modal-dialog) about the rules:

.modal-dialog {
  display: table; /* You are now a table, got it? */ 
  position: relative; /* Who said you can't move? */
  width: auto; /* Don't you dare touch the belt! */
  min-width: yourMinimumWidth; /* Magic trick for skinny content */ 
}


An event handler using jQuery to react when we hide the modal:

$('#yourModal').on('hidden.bs.modal', function () {
  // Adjustments after modal has been hidden, appended here like a postcard from Hogwarts!
});


JavaScript, the CSS-helper

Sometimes, CSS feels lonely and tired, and that's where JavaScript comes to the rescue, helping to dynamically calculate dimensions.

function resizeModal() {
  var modalDialog = $('.modal-dialog');
  modalDialog.css('max-height', 'calc(100vh - 100px)'); // Room for activities! Reserved 100px for padding and spacing.
  modalDialog.find('.modal-content').css('overflow-y', 'auto');
}
// Send an owl carrying this function each time you need to resize the modal.


Fancy outfits for different devices

Oh, the variety!

Your modal should put on the correct outfit (size) based on the device. Media queries got you covered!

@media (max-width: 768px) {
  .modal-dialog {
    width: 100%; // Beefed-up for smaller devices
    max-width: none; // No boundaries!
  }
}


Interactive content: a beauty contest!

Forms, sliders or other interactive elements can be a little problematic - rather dramatic. They may change their size suddenly like a pop singer changes outfits. Be ready for them!

Smooth resizing: A lullaby for pixels

Just like a baby enjoying a lullaby, your modal also enjoys smooth resizing transitions. Take care of your modal baby!

.modal-dialog {
  transition: width 0.3s ease-in-out; // The magic pill for smooth transitions.
}


UX - User's eXpectation from you!

Always keep an eye on user’s journey. Loading states, progress indicators can be critical for pigeon mail (modals loading external content like AJAX requests).