Set bootstrap modal width to percent of screen and center it

Question

Can someone help me set the width of a bootstrap modal to 75% of the screen's width and horizontally center it? So far I have tried:

  <div class="container">
    <!-- Modal -->
    <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="createTemplateModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <!--Content-->
            <div class="modal-content">
                <!--Header-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">My Modal</h4>
                </div>
                <!--Body-->
                <div class="modal-body">
                  <h1>
                  Modal Body
                  </h1>
                <!--Footer-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
  </div>

        $('#mymodal').modal('toggle');
        $('#mymodal').on('shown.bs.modal', function() {
          var width = $(window).width() * 0.75;
          console.log('width is: ' + width);
          $(this).find(".modal-body").css("width", width);
        });

However, this 1) doesn't set the width to 75% of my screen's width and 2) it makes part of the modal body's contents overflow horizontally. Here is my fiddle: http://jsfiddle.net/dc46o5p9/

Thanks in advance!

Answer 1

Here is the snippet.

$("#mymodal").modal('toggle');

.modal-dialog {
  width: 75%;
  margin: 0 auto;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<div class="container">
<!-- Modal -->
    <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="createTemplateModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <!--Content-->
            <div class="modal-content">
                <!--Header-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">My Modal</h4>
                </div>
                <!--Body-->
                <div class="modal-body">
                  <h1>
                  Modal Body
                  </h1>
                <!--Footer-->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>