I am trying to change the background color of modal header of twitter bootstrap using following css code.
.modal-header { padding:9px 15px; border-bottom:1px solid #eee; background-color: #0480be; } .modal-header .close{margin-top:2px} .modal-header h3{margin:0;line-height:30px}But this code makes the corner of the modal header angular. Before using above code corners were round shaped. How can I get round shaped corner of modal header with the above background color ?? Thanks
9 Answers
You can use the css below, put this in your custom css to override the bootstrap css.
.modal-header { padding:9px 15px; border-bottom:1px solid #eee; background-color: #0480be; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }So, I tried these other ways, but there was a VERY slight irritant and that was if you keep the modal-content border radius, in FF and Chrome, there is a slight bit of white trim showing along the borders, even if you use 5px on the modal-header border radius. (standard modal-content border radius is 6px, so 5px on the modal-header border top radius covers some white).
My solution:
.modal-body
{ background-color: #FFFFFF;
}
.modal-content
{ border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; background-color: transparent;
}
.modal-footer
{ border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomright: 6px;
}
.modal-header
{ border-top-left-radius: 6px; border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px;
}!! CAVEAT !!
You must then set the background colors of the modal-header, modal-content, and modal-footer. This is not bad trade-off, because it allows you to do this:
<div>
<div>
<div>EDIT
Or even better:
<div>The corners are actually in .modal-content
So you may try this:
.modal-content { background-color: #0480be;
}
.modal-body { background-color: #fff;
}If you change the color of the header or footer, the rounded corners will be drawn over.
1All i needed was:
.modal-header{ background-color:#0f0;
}
.modal-content { overflow:hidden;
}overflow: hidden to keep the color inside the border-radius
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
Add this class to your css file to override the bootstrap class.modal-header
.modal-header { background:#0480be;
}It's important try to never edit Bootstrap CSS, in order to be able to update from the repo and not loose the changes made or break something in futures releases.
1A little late to the party, but here's another solution.
Simply adjusting the class of the modal to something like alert-danger does work, however it removes the top rounded corners of the modal.
A workaround is to give the element with modal-header an additional class of panel-heading, e.g.
<div tabindex="-1"> <div> <div> <div> <!-- change here --> <button type="button" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>Modal title</h4> </div> <div> <p>One fine body…</p> </div> <div> <button type="button">Close</button> <button type="button">Save changes</button> </div> </div> </div>
</div>Then, to change the heading color you can do something like (assuming you're using jQUery)
jQuery('.modal-content').addClass('panel-danger')You can solve this by simply adding class to modal-header
<div>All the other answersoverflow:hidden、alert-danger not work for me in Bootstrap 4,
but I found a simple solution in Bootstrap 4.
Since the white trim comes from modal-content, just add border-0 class to it and the white trim disappear.
Example:
