How can I change the default width of a Twitter Bootstrap modal box?

Answer 1

I used a combination of CSS and jQuery, along with hints on this page, to create a fluid width and height using Bootstrap 3.

First, some CSS to handle the width and optional scrollbar for the content area

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

And then some jQuery to adjust the height of the content area if needed

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

Full write-up and code at http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/