如何编辑bootstrap模式继承的CSS

Question

I'm trying to customize the CSS for a modal on my website like background colors, padding etc. The modal seems to inherit the same CSS as it's parent and when I edit the CSS on my webpage, the overrides are working fine, but the override will not extend to the same element displayed in my modal.

The CSS code that I'm trying to edit is (.grid-item-header) and I can simply create an override that works on my webpage, but the exact same (.grid-item-header), which is the same CSS that displays when viewing in developer tools within the modal. The CSS changes are not being applied though. So far I've tried (.modal .grid-item-header) and (.modal-content .grid-item-header), but I just cannot get it to change.

.grid-item-header {background-color: #000000!important;}
.modal .grid-item-header {background-color: #000000!important;}
.modal-content .grid-item-header {background-color: #000000!important;}

I wanted the modals header background colors to change, which I did not.

Answer 1

You can override modal popup css by using following code, this is work for me try this once. put this at the top of page or on conman page

@media( min-width: 768px ) {           
.modal-header {
    background-color: black
}

}