Change the background color in a twitter bootstrap modal?

Question

When creating a modal in twitter bootstrap, is there any way to change the background color? Remove the shading entirely?

NB: For removing shading, this doesn\'

Answer 1

I used couple of hours trying to figure how to remove background from launched modal, so far tried

.modal-backdrop {    background: none; }

Didn't work even I have tried to work with javascript like

 <script type="text/javascript">   
 $('#modal-id').on('shown.bs.modal',  function () {
       $(".modal-backdrop.in").hide();     })
</script>

Also didn't work either. I just added

data-backdrop="false"

to

<div class="modal fade" id="myModal" data-backdrop="false">......</div>

And Applying css CLASS

.modal {     background-color: transparent !important;  }

Now its working like a charm This worked with Bootstrap 3

Answer 2

For Angular(7+) Project:

::ng-deep .modal-backdrop.show {
    opacity: 0.7 !important;
}

Otherwise you can use:

.modal-backdrop.show {
    opacity: 0.7 !important;
}

Answer 3

CSS

If this doesn't work:

.modal-backdrop {
   background-color: red;
}

try this:

.modal { 
   background-color: red !important; 
}

Answer 4

Add the following CSS;

.modal .modal-dialog .modal-content{  background-color: #d4c484; }

<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
...

Answer 5

remove bootstrap modal background try this one

.modal-backdrop {
   background: none;
}

Answer 6

If you want to change the background color of the backdrop for a specific modal, you can access the backdrop element in this way:

$('#myModal').data('bs.modal').$backdrop

Then you can change any css property via .css jquery function. In particular, with background:

$('#myModal').data('bs.modal').$backdrop.css('background-color','orange')

Note that $('#myModal') has to be initialized, otherwise $backdrop is going to be null. Same applies to bs.modal data element.