Bootstrap Class col-lg... removes box-shadow

Question

I have a css class:

.content-shadow {
box-shadow: 0 0 5px #888888 !important;
}

I am using this class at to locations in the file:

<div class="root-content-padder">

    <div class="container">

        <h1><strong>"</strong>Die Freiarbeit ist nur das Ergebnis deiner Basis</h1>

        <div class="content-shadow">

            <div class="text-center st-padding">
                <iframe style="width: 50vw; height: 430px"
                        src="youtube.com...."></iframe>

            </div>
            <div class="text-center st-padding">
                <button class="btn btn-default btn-lg">Text</button>
                <strong>Or</strong>
                <button class="btn btn-default btn-lg">Text</button>
            </div>

        </div>
    </div>

    <div style="height: 25px;"></div>
    <div class="container">
        <div class="content-shadow">

                <div class="col-lg-4">
                    <h1>LoL</h1>
                </div>
                <div class="col-lg-8">

                    <p>Text</p>
                    <br/>
                    <a class="btn btn-default btn-lg" href="?page=me">Weiter lesen</a>
                </div>
        </div>
    </div>
</div>

Now the first div which has the class content-shadow works fine, without a problem, but on the second one the shadow does not appear. I can make the shadow visible on the second, if i remove the two divs <div class="col-lg-4">...</div> and <div class="col-lg-8">...</div>

That is extremely strange and i have no idea why, maybe here someone can help. Regards Liz3

Answer 1

So the solution was pretty straight forward:

I had to put a <div style="clear: both;"></div> after the

 <div class="col-lg-4">
    <h1>LoL</h1>
  </div>
  <div class="col-lg-8">

    <p>Text</p>
    <br/>
    <a class="btn btn-default btn-lg" href="?page=me">Weiter lesen</a>
  </div>

Answer 2

If you remove any style from debugger tool, it means it comments your style at run time.

As you are using external style and if you remove it from debugger tool, it comments the styles written in content-shadow, so where ever you have used content-shadow doesn't work.

But if you use inline-style and apply box-shadow in two different div and then remove any one of the box-shadow from debugger tool, it just comment your internal-style of that particular div at run-time where as another one will work

So, it's a normal behaviour

Coming to your second point, col-lg-* removes box-shadow

It is working with col-lg-* also as you can see the snippet. But shadow at the bottom is not visible, to make it visible apply padding-bottom: 10px; in the parent element of content-shadow.

.content-shadow {
  box-shadow: 0 0 10px darkgreen !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="root-content-padder">

  <div class="container">

    <h1><strong>"</strong>Die Freiarbeit ist nur das Ergebnis deiner Basis</h1>

    <div class="content-shadow">

      <div class="text-center st-padding">
        <iframe style="width: 50vw; height: 230px" src="youtube.com...."></iframe>

      </div>
      <div class="text-center st-padding">
        <button class="btn btn-default btn-lg">Text</button>
        <strong>Or</strong>
        <button class="btn btn-default btn-lg">Text</button>
      </div>

    </div>
  </div>

  <div style="height: 25px;"></div>
  <div class="container" style="padding-bottom: 10px;">
    <div class="content-shadow">

      <div class="col-lg-4">
        <h1>LoL</h1>
      </div>
      <div class="col-lg-8">

        <p>Text</p>
        <br/>
        <a class="btn btn-default btn-lg" href="?page=me">Weiter lesen</a>
      </div>
    </div>
  </div>
</div>