Change modal width only for specific modal in Bootbox

Question

I am using Bootbox 4 with Bootstrap 3 on IE (IE 8 / IE 9) and everything works as intended.

It looks like in Bootstrap 3 you can set the modal width in CSS as follows, however, anything like this would then change all my modals:

.modal-dialog {
    width:70% !important;
}

Is there a way in CSS, jQuery or the Bootbox settings that I can change the width of a Bootbox alert modal only for one specific modal? The Bootbox page only has a very short documentation and I couldn't find information on this anywhere else.

Update

JS that creates the specific modal (with sample data):

bootbox.dialog({
    message: " \
        <table class='table table-hover'> \
            <thead> \
                <tr> \
                    <th>Item Name</th> \
                    <th>Location</th> \
                    <th>Path</th> \
                    <th>Last Update</th> \
                </tr> \
            </thead> \
            <tbody> \
                <tr> \
                    <td>Item 1</td> \
                    <td>Navbar - Level 2</td> \
                    <td>Products - blabla</td> \
                    <td>Added by xxx on 05 Aug 2014</td> \
                </tr> \
            </tbody> \
        </table>",
    title: "Search Results",
    buttons: {
        main: {
            label: "Close",
            className: "btn-primary"
        }
    },
    className: "modal70"
});

And my current CSS:

.modal-dialog.modal70 {
    width:70% !important;
}

Moshtaf · Accepted Answer · 2014-08-10T10:55:21.857

14

Try this:

.modal70 > .modal-dialog {
    width:70% !important;
}

Update:

Try Demo

edited Aug 10 '14 at 10:55

answered Aug 10 '14 at 09:57

Moshtaf

4,833
2
24
34

Thanks for this. I tried adding class: "modal70" to the JS that creates the modal which does not make a difference here. Also the following didn`'t work: className: "modal70". Any ideas what's wrong ? – user2571510 Aug 10 '14 at 10:14
please put your html modal code or the JS code that create modal to providing an exact solution. – Moshtaf Aug 10 '14 at 10:16
Thanks - no difference. I did some more research and it looks like the issue is with the parent div that uses the standard Bootstrap modal class. Bootstrap does offer different modal width classes here so I tried adding the following to my JS but again no change, even though this looks like the more "official" approach: .find('div.modal-dialog').addClass('modal-lg') – user2571510 Aug 10 '14 at 10:46
Sorry, I had a typo when trying your last update - this works great ! Thanks a lot for your help ! Just wondering why Boostrap doesnt have a way for that if they already got the classes for it. :) – user2571510 Aug 10 '14 at 10:56

score 6 · Answer 2 · answered May 06 '15 at 12:05

Just as further information...

As the documentation says, you can control the size of the modal with the "size" property in the constructor.

Adds the relevant Bootstrap modal size class to the dialog wrapper.
Valid values are 'large' and 'small' (Default: null)

bootbox.dialog({
    size: <small|large>
});

See Snippet for usage example ^{(best seen in full screen)}

$(".size-by-funcion-0").click(function() {
    bootbox.dialog({
        size: "null",
        title: "Default Size Modal Example",
        message: "...",
    });
});

$(".size-by-funcion-1").click(function() {
    bootbox.dialog({
        size: "small",
        title: "Small Size Modal Example",
        message: "...",
    });
});

$(".size-by-funcion-2").click(function() {
    bootbox.dialog({
        size: "large",
        title: "Large Size Modal Example",
        message: "...",
    });
});

/*********************/
// or make it dynamic... with only one function
$(".dynamic-size").click(function() {
    bootbox.dialog({
        size: $(this).data('size'),
        title: "Dynamic Size Modal Example",
        message: "...",
    });
});

p {
    cursor: pointer;
    background-color: #ccc;
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://github.com/makeusabrew/bootbox/releases/download/v4.3.0/bootbox.min.js"></script>

<p class="size-by-funcion-0">Modal with the default size</p>
<p class="size-by-funcion-1">Modal with "size:small"</p>
<p class="size-by-funcion-2">Modal with "size:large"</p>

<hr />

<p class="dynamic-size" data-size="null">Modal with "size:default"</p>
<p class="dynamic-size" data-size="small">Modal with "size:small"</p>
<p class="dynamic-size" data-size="large">Modal with "size:large"</p>

More info on source: http://bootboxjs.com/documentation.html

Note: Requires Bootstrap 3.1.0 or newer.

score 0 · Answer 3 · answered Jun 17 '19 at 09:36

If the solution from Moshtaf doesn't work, complete it with one more line:

.modal70 > .modal-dialog {
    width:70% !important;
    max-width:70% !important;
}

This is because Bootbox includes too a default value for max-width that can overwrite the definition for width.

Change modal width only for specific modal in Bootbox

Update

3 Answers3