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/

Answer 2

With Bootstrap 3, all that is required is a percentage value given to the modal-dialog via CSS

CSS

#alertModal .modal-dialog{
     width: 20%;
}

Answer 3

FYI Bootstrap 3 handles the left property automatically. So simply adding this CSS will change the width and keep it centered:

.modal .modal-dialog { width: 800px; }

Answer 4

In v3 of Bootstrap there is a simple method to make a modal larger. Just add the class modal-lg next to modal-dialog.

<!-- My Modal Popup -->
<div id="MyWidePopup" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!!
        <!-- Modal content-->
        <div class="modal-content">

Answer 5

I've found this solution that works better for me. You can use this:

$('.modal').css({
  'width': function () { 
    return ($(document).width() * .9) + 'px';  
  },
  'margin-left': function () { 
    return -($(this).width() / 2); 
  }
});

or this depending your requirements:

$('.modal').css({
  width: 'auto',
  'margin-left': function () {
     return -($(this).width() / 2);
  }
});

See the post where I found that: https://github.com/twitter/bootstrap/issues/675

Answer 6

Bootstrap 3.x.x

   <!-- Modal -->
<div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm employeeModal" role="document">

        <form>

        <div class="modal-content">
            <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">Modal Title</h4>
            </div>

            <div class="modal-body row">
                Modal Body...
            </div>

            <div class="modal-footer"> 
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

        </form>

    </div>
</div>

Notice I added .employeeModal class in second div. Then style that class.

.employeeModal{
        width: 700px;
    }