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.
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;
}