Strange problem with Bootstrap / CSS

advertisements

I had a problem with something remotely similar recently, my custom CSS wouldn't work at all: Custom CSS Won't Work With Bootstrap

I fixed this issue by referencing bootstrap externally (using the CDN) and I was able to use my own CSS flawlessly.

Just today I was attempting to change the text size of an element and it was only working when I used the <style> element like before. When I remove the link to bootstrap, bootstrap elements continue to work (the panels in the example below)

/* Menu Box */
.textcenter {
    text-align: center;
}

.panelcolors {
    background-color: #6fa1f2;
    border-color: #6fa1f2;
}

#panelhcolors {
    background-color: #6394e2;
    border-color: #6394e2;
    color: #f7f7f7;
}

.paneltext {
    color: #f7f7f7;
}

/* Menu Box */

/* BG CYCLER */
#background_cycler {
    padding:0;
    margin:0;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1
}

#background_cycler img {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    z-index:1
    background-size: cover;
    background-position: center;
}

#background_cycler img.active {
    z-index:3
}
/* BG CYCLER */
<!DOCTYPE html>

<html>

<head>

<title>Help Menu</title>

<!--
==============================================================================================================

REFERENCES (BOOTSTRAP 3.3.7) (jQuery 3.1.1)

==============================================================================================================
-->

<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> -->
<link rel="stylesheet" href="/custom/style.css">
<script src="/custom/programming.js"></script>

<!--
==============================================================================================================

BOOTSTRAP REFERENCES DISTRO 3.3.7

==============================================================================================================
-->

</head>

<body>

<!-- BACKGROUND -->
<div id="background_cycler" >

<script>
$('#background_cycler').hide();//hide the background while the images load, ready to fade in later
</script>

<img class="active" src="/images/background/bg_1.jpg" alt=""/>
<img src="/images/background/bg_2.jpg" alt=""   />
<img src="/images/background/bg_3.jpg" alt=""  />
<img src="/images/background/bg_4.jpg" alt=""/>
<img src="/images/background/bg_5.jpg" alt=""  />
</div>

<!-- HOME BUTTON -->

<br>
<br>
<div>
    <br>
    <center>
            <button type="button" class="btn btn-info btn-circle btn-lg"><i class="glyphicon glyphicon-home"></i></button> <br>
    </center>
</div> <br>
<br>
<br>
<br>
<br>
<div style="max-width: 50%;" class="container">
    <div class="panel panel-default panelcolors">
        <div id="panelhcolors" class="panel-heading"><h1 class="textcenter">What Do You Need Help With?<br> WORK IN PROGRESS</h1></div>
<br>
            <p>
                <div class="textcenter paneltext">
                    <div>
                        <a href="/main/fp.html">Frequent Problems</a>
                    </div>
<br>
                    <div>
                        Printers
                    </div>
<br>
                    <div>
                        Drivers
                    </div>
<br>
                </div>
            </p>
    </div>
</div>

</body>
</html>

To test further I commented out the link to my custom CSS, and the panels and everything disappeared (nothing in my custom CSS has anything to do with the existence of panels besides their colour).

I have added the link to custom CSS back to the HTML and everything looked normal again. I then deleted my custom CSS file from the server entirely and nothing on the website changed at all. When nothing is commented out, no edits to my custom CSS file effect anything at all (even though they did before I left work yesterday).

Any idea what could be wrong?


It sounds like a caching issue. Try versioning your css like this:

<link href="/custom/style.css?v=1.0" rel="stylesheet" type="text/css" />

The ?v=1.0 will "bust" the browser (or server-side) caching and you will be assured you are looking at your latest code.

As you gain confidence, this is a lovely trick with php to "auto-version" your css:

<?php $base_dir  = __DIR__;?>
<link href="/custom/style.css?v=<?php echo filemtime($base_dir."/custom/style.css")?>" rel="stylesheet" type="text/css" />

...that gets the time the CSS file was made, and appends that time as the version.