I myself wondered how I could change the color of the modal-header.
In my solution to the problem I attempted to follow in the path of how my interpretation of the Bootstrap vision was. I added marker classes to tell what the modal dialog box does.
modal-success, modal-info, modal-warning and modal-error tells what they do and you don't trap your self by suddenly having a color you can't use in every situation if you change some of the modal classes in bootstrap. Of course if you make your own theme you should change them.
.modal-success {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dff0d8), to(#c8e5bc));
background-image: -webkit-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: -moz-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: -o-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
border-color: #b2dba1;
border-radius: 6px 6px 0 0;
}
In my solution I actually just copied the styling from alert-success
in bootstrap and added the border-radius to keep the rounded corners.
A plunk demonstration of my solution to this problem