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

User · Answer

All i needed was    modal-header       background-color  0f0     modal-content       overflow hidden      overflow  hidden to keep the color inside the border-radius

User · Answer

You can solve this by simply adding class to modal-header  lt div class  quot modal-header bg-primary text-white quot  gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt div class  modal fade  tabindex  -1  role  dialog  gt     lt div class  modal-dialog  role  document  gt       lt div class  modal-content  gt         lt div class  modal-header panel-heading  gt   lt  -- change here -- gt           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt           lt h4 class  modal-title  gt Modal title lt  h4 gt         lt  div gt         lt div class  modal-body  gt           lt p gt One fine body amp hellip  lt  p gt         lt  div gt         lt div class  modal-footer  gt           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    Then  to change the heading color you can do something like  assuming you re using jQUery   jQuery   modal-content   addClass  panel-danger

User · Answer

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    lt div class  modal-header bg-primary  gt    lt div class  modal-body bgColorWhite  gt    lt div class  modal-footer bg-info  gt    EDIT  Or even better    lt div class  modal-header alert-primary  gt

User · Answer

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

[css] Change header background color of modal of twitter bootstrap

Examples related to css

Examples related to twitter-bootstrap

[css] Change header background color of modal of twitter bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-modal