Change css in bootbox window

Question

How to add a style (let say bold) to the "Hello world" in this code:

bootbox.alert("Hello world!", function() { Example.show("Hello world callback"); }); 

thanks

Answer 1

The best thing to do is check the popup using Firebug, and you can see the HTML that makes up the modal, so you can write css for it. After looking at the example on my website, here is the html that makes up the basic example:

 <div style="overflow: hidden;" tabindex="-1" class="bootbox modal fade in" aria-hidden="false"> <div class="modal-body">Hello world!</div> <div class="modal-footer"><a href="javascript:;" class="btn btn-primary" data-handler="0">OK</a></div> </div> 

So, if you want to change the color of the footer:

 .modal-footer {background:#c00;} 

Answer 2

James King answer extension:

using the firebug console, you can see the response to the command:

 bootbox.alert('hello world') 

- A link to the boot box containing the div element; Object[div.bootbox]

Therefore, it is very simple to completely override the warning when you call it by simply changing its css attributes:

 bootbox.alert('Danger!!' ).find('.modal-content').css({'background-color': '#f99', 'font-weight' : 'bold', color: '#F00', 'font-size': '2em', 'font-weight' : 'bold'} ); 

Answer 3

Summarize:

For text style

Add the html line directly to the line:

 bootbox.alert("<b>Hello world!<b>"); // (thanks BenM) bootbox.alert("<div class='label'>Hello world!</div>"); // (thanks Adriano) 

To style bootbox inline elements

Use jQuery return object to change classes, css, etc:

 var box = bootbox.alert("Hello world!"); box.find('.modal-content').css({'background-color': '#f99'}); // (thanks Mark B) box.find(".btn-primary").removeClass("btn-primary").addClass("btn-danger"); 

Answer 4

You can create an empty opacity 0:

 <div id="msgbox"></div> 

then you can just use the opacity change on js:

  bootbox.alert(x, function() { document.getElementById('msgbox').innerHTML = x; document.getElementById('msgbox').style.opacity= '1'; setTimeout(function(){ document.getElementById('msgbox').style.opacity = '0'; }, 2000); }); 

and you can freely create msgbox with position, colors or even with some kind of transition

 #msgbox { color: #CC0000; font-weight: bold; text-align: center; transition: all 1s linear; -webkit-transition: all 1s linear; } 

Answer 5

Asumming Example.show(); puts this code somewhere on the page, wrapping the element strong will work:

  bootbox.alert("Hello world!", function() { Example.show("<strong>Hello world</strong> callback"); });