CODEWITHSUNDEEP
twitter-bootstrapcss
Run
Run

Reputation: 57196

Bootstrap: how to remove the box shadow from the modal?

how can I remove the box shadow from bootstrap's modal? I tried with the 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;
    }

bootstrap,

<!-- 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>

Upvotes: 16

Views: 41636

Answers (3)

Nazmul Haque
Nazmul Haque

Reputation: 868

Below css code working for me.

.modal-backdrop.fade.show{
   display:none;
 }

Upvotes: 1

rockStar
rockStar

Reputation: 1296

I did try this and seems 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

Upvotes: 23

HarleyCreative
HarleyCreative

Reputation: 303

Have no fear, there is a very simple solution to this.

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

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

So your solution is simply:

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

See the working example on bootply.

Upvotes: 16

Related Questions