How to resize Twitter Bootstrap modal dynamically based on the content

This worked for me, none of the above worked.

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

Since your content must be dynamic you can set the css properties of the modal dynamically on show event of the modal which will re-size the modal overriding its default specs. Reason being bootstrap applies a max-height to the modal body with the css rule as below:

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

So you can add inline styles dynamically using jquery css method:

For newer versions of bootstrap use show.bs.modal

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

For older versions of bootstrap use show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

or use a css rule to override:

.autoModal.modal .modal-body{
    max-height: 100%;
}

and add this class autoModal to your target modals.

Change the content dynamically in the fiddle, you will see the modal getting resized accordingly. Demo

Newer version of bootstrap see the available event names.

• show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
• shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
• hide.bs.modal This event is fired immediately when the hide instance method has been called.
• hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
• loaded.bs.modal This event is fired when the modal has loaded content using the remote option.

Older version of bootstrap modal events supported.

• Show - This event fires immediately when the show instance method is called.
• shown - This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
• hide - This event is fired immediately when the hide instance method has been called.
• hidden - This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).