Creating a Variable-Width Modal Dialog Using Bootstrap 3

I’ve enjoyed using Bootstrap 3 lately, but was limited by the fixed-width of the modal dialog boxes. I wanted to override the default Bootstrap modal so it was variable-width and height-optimized.

I created CSS classes to handle the width, and the optional introduction of a scrollbar for extra-tall content. Then, I just add “modal-wide” to the main modal div. In the example below, I’m using 90%.

Override the default Bootstrap 3 modal so it is variable-width and height-optimized #bootstrap Click To Tweet

This works fine as-is, as long as the height of the content in the modal dialog is not too tall. If that’s the case, we need to introduce a max-height to that content area. I use jQuery to calculate this based off the browser height. The result: the modal will be only as tall as necessary, and will provide a scrollbar if needed.

Check out this Pen!

9 responses

  1. The logical way to do it would be to follow the grid layout model, e.g., ‘modal-sm-5’ for example; and generate a set of ‘modal-*’ classes to accommodate various widths.

    • That would be a nice extension of the approach if you needed that flexibility. I didn’t, so that’s why my approach was, well, logical for me and the specific use case we needed to offer a solution for.

  2. Hey Scott, awesome article! I have an iframe within a modal window and wanted the height/width to adjust dynamically according to the iframe content. Is this possible?

    • Thanks, Dave! I’m sure that is possible. I imagine if you set the iframe width to 100%, and after the modal opens you used JavaScript to determine the height of content–body, you could set the height of the iframe accordingly using JavaScript.

Leave a Reply

Your email address will not be published. Required fields are marked *