Change header background color of modal of twitter bootstrap

Question

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

Answer 1

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;
 }

Answer 2

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 class="modal-header bg-primary">

<div class="modal-body bgColorWhite">

<div class="modal-footer bg-info">

EDIT

Or even better:

<div class="modal-header alert-primary">

Answer 3

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.

Answer 4

All i needed was:

.modal-header{
     background-color:#0f0;
}
.modal-content {
    overflow:hidden;
}

overflow: hidden to keep the color inside the border-radius

Answer 5

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

Answer 6

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.

Answer 7

A 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 class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header panel-heading"> <!-- change here -->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">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')

Answer 8

You can solve this by simply adding class to modal-header

<div class="modal-header bg-primary text-white">

Answer 9

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: https://codepen.io/eric1214/pen/BajLwzE?editors=1010