Bootbox change title css

For my project I want different pop-ups for different useage. So I created a new css class. Now I want to change the style of the title component (as shown below) on the same way as I changed the buttons.

So my question is: can I change the css of the title the same way as I change the css of the buttons? With the className property. Also, how should I do that?

bootbox.dialog({
    message: "<h4>" + errorMessage + "<h4>",
    title: $filter("translate")("Warning"),
    buttons: {
        no: {
            label: $filter("translate")("Cancel"),
            className: "c-btn-declined-selection c-btn-global-warning",
            callback: noCallback
        },
        yes: {
            label: $filter("translate")("Confirm"),
            className: "c-btn-confirm-selection c-btn-global-warning",
            callback: yesCallback
        }
    }

Solution

From reading the Bootbox.js documentation, it seems that an inherent title-styling method doesn't exist. This leaves you with two options...

1. Add the style/class in-line:

bootbox.dialog({
    //...
    title: "<span style='color: red;'>This title is red</span>",
    //...
})

bootbox.dialog({
    //...
    title: "<span class="redText">This title is red</span>",
    //...
})

2. Manipulate the generated elements manually

Right click your Bootbox dialog on the page and go to Inspect Element. From here you'll see the generated content, including classes and elements, from which you can just use some basic CSS rules to style them.

For example, if the pop-up HTML looked like this...

<div class='bootbox-popup'>
    <h4 class='popup-title'></h4>
    <div class='popup-body'> ... </div>
</div>

You could style it using something like:

h4.popup-title {
    color: red;
}