@tmg's answer will only work for Bootstrap 3. For Bootstrap 4, use this:

.modal {
    text-align: center;
}

Alongside his suggestion:

.modal-dialog {
    text-align: left; /* you'll likely want this */
    max-width: 100%;
    width: auto !important;
    display: inline-block;
}

Based on content modal width auto adjusted, plz followed by below code:

 .modal-dialog{
  margin: auto;
  max-width: none;  
  width: fit-content;
 }

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).

The easiest way can be inline style on modal-dialog div :

<div class="modal" id="myModal">
   <div class="modal-dialog" style="width:1250px;">
      <div class="modal-content">
            ...

        </div>
     </div>
 </div>

Try this :

  <div class="modal-body" style="overflow-y:auto;">

Instead of using a %, the units vh set it to a percent of the viewport (browser window) size.

I was able to set a modal with an image and text beneath to be responsive to the browser window size using vh.

If you just want the content to scroll, you could leave out the part that limits the size of the modal body.

/*When the modal fills the screen it has an even 2.5% on top and bottom*/
/*Centers the modal*/
.modal-dialog {
  margin: 2.5vh auto;
}

/*Sets the maximum height of the entire modal to 95% of the screen height*/
.modal-content {
  max-height: 95vh;
  overflow: scroll;
}

/*Sets the maximum height of the modal body to 90% of the screen height*/
.modal-body {
  max-height: 90vh;
}
/*Sets the maximum height of the modal image to 69% of the screen height*/
.modal-body img {
  max-height: 69vh;
}

If you need this solution for only few types of modals just use style="width:90%" attribute.

example:

div class="modal-dialog modal-lg" style="width:90%"

note: this will change only this particular modal

As you know that by default almost all elements(like <div> and <p> and <h1> etc) are having display:block CSS property so such all elements will take the full width of parent. So if you won't define any width for .modal-content and . .modal then due to display:block it will inherit the width of parent.

You should add a max-width constrain to your .modal-content to achieve this. Also you can add margin:0 auto to align the .modal-contentcenter.