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.

Modal_NotCentered

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.

Modal_Centered

Advertisements

17 responses to “Resizing a Bootstrap 3 Modal”

  1. Leonan says :

    Excellent!! Save my day!! 🙂

  2. Dacian Popuțe says :

    Where is the like button?! 🙂

  3. Salman says :

    Excellent, very well explained (Y)

  4. kilili says :

    sizing is not all about the width. i ve expected to see some code about the height setup but no luck. you should change the title with “Setting width of a bootstrap modal.”

  5. Alex Sigmanor says :

    but then modal will be no responsive

  6. ahmad says :

    its better to set the width in percent
    otherwise it cause problem in calculation of the positions of some elements like select2
    I had that problem

  7. Marshal E Jose says :

    How can i use two customises Modals?

  8. Dafali says :

    thanks

    Another way using Jquery.

    .$(“.modal-content”).css {
    width: 900px;
    margin-left: -150px;
    }

  9. Gaurav says :

    Cool and informative Post!
    Here is example : How To Upgrade Bootstrap 2 To Twitter Bootstrap 3 Build.

    http://webmuch.com/upgrade-bootstrap-2-twitter-bootstrap3-build/

    Try this!

  10. tarak says :

    Really many thx Brad

  11. Ben says :

    Here is a simple example works fine.

    Reference: http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling

    .modal .modal-body {
    max-height: 520px;
    max-width: 900px;
    overflow-y: auto;
    }

    More Details

    ;

    ×
    Modal Title

    Your modal text

    Close

  12. Worke says :

    Thank you so much

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: