Currently, I am successfully using Bootbox 4 along with Bootstrap 3 on IE (IE 8 / IE 9) without any issues.
In Bootstrap 3, it seems that you can adjust the modal width using CSS like this, but the drawback is that this change will apply to all modals:
.modal-dialog {
width:70% !important;
}
Is there a method in CSS, jQuery, or Bootbox settings to specifically modify the width of a Bootbox alert modal for only one particular instance? The documentation provided by Bootbox is limited and I haven't been able to find information on this elsewhere.
Update
Below is the JavaScript code that generates 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"
});
Here is my current CSS styling:
.modal-dialog.modal70 {
width:70% !important;
}