Geek Answers Handbook

Bootstrap: how to remove window shadow from modal?

how can i remove window shadow from bootstrap modal? I tried css below but no luck. Any ideas?

CSS

.modal-dialog { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -moz-transition: none; -webkit-transition: none; }

self-loading

 <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false"> <div class="modal-dialog custom-class"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </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>
+6
source share
2 answers

I tried this and it seemed to work

 .modal-content{ -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0); -moz-box-shadow: 0 5px 15px rgba(0,0,0,0); -o-box-shadow: 0 5px 15px rgba(0,0,0,0); box-shadow: 0 5px 15px rgba(0,0,0,0); }

a bootply sample

+12
source

Do not be afraid, this is a very simple solution.

You just need to be more specific in your CSS selector and include a div . The reason for this is because the style you are trying to override in CSS Bootstrap was written by div.modal-dialog {...} .

In CSS, element.class more specific than .class , and a more specific tag will always take precedence.

So your solution is simple:

 div.modal-content{ -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; }

See a working example at boot.

+12
source

More articles:


All Articles