Resizing a Bootstrap 3 Modal

The Twitter Bootstrap modal is a very slick dialog that you can easily use within XPages. In this post, I’ll show how to increase the size of modals globally. I’ll also show how to re-center the modal if you resize the body with CSS.

Resizing a Modal

The bootstrap modal uses the class modal-dialog. By default, it is 600px wide.

To widen it, use CSS to increase the width.

.modal-dialog {
  width: 900px;
}

This updates the modal size and allows it to be centered properly when launched.

However, if you increase the size on the modal content area or body, it will not re-center properly. (This may happen if you don’t want to globally resize all modals or if you have a reusable control for modals, but your content changes and you want to re-size some instances.)

.modal-content {
  width: 900px;
}

If you display this modal, you’ll notice that it’s no longer centered.

Centering a Modal with the Body Resized

In order to center it, you can add another line of CSS to set a negative value for the left margin.

Since the modal is automatically centered based on a width of 600px, you want to move it back to the left by half of the additional width.

Left Margin = (600px – [New Width]) / 2

In this example, the new width is 900px, so the left margin is (600-900)/2 = -150px

Here’s the updated CSS:

.modal-content {
  width: 900px;
  margin-left: -150px;
}

Now the modal will be centered.