I'm developing a bootstrap website and I'm using wamp as my server. After working for a while, when I make a change and then refresh my browser, the change doesn't appear. I've tried to search through the StackOverflow and did everything, Like using the Ctrl+F5 and clearing cache, altering the inspect element things. Still, it didn't fix my problem. Hoping to get a solution now. PS: I was trying to add a navbar below the profile image. Html:-
<DOCTYPE !html>
<html>
<head>
<title>Converter</title>
<meta http-equiv="Cache-control" content="no-cache">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="TopSection">
<img src="images/first_img.jpg" class="headimg"/>
<img src="images/profile_img.png" class="profileimg" />
</div>
<!-- navbar -->
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Css:-
.TopSection {
position: relative;
}
.TopSection .headimg {
height: 500px;
width: 100%;
position: absolute;
}
.TopSection .profileimg {
margin-left: 550px;
margin-top: 390px;
height: 190px;
width: 190px;
position: absolute;
border: 5px black solid;
border-radius: 100%;
}
@media only screen and (max-width: 600px) {
.TopSection .headimg {
height: 400px;
width: 100%;
position: absolute;
}
.TopSection .profileimg {
margin-left: 200px;
margin-top: 300px;
height: 170px;
width: 170px;
position: absolute;
border: 5px black solid;
border-radius: 100%;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
You can prevent CSS file cache.Using the version method.like below
<link rel="stylesheet" type="text/css" href="style.css?v=1" />
If you set caches to expire far in the future adding ?v=1 will let the server know this is a new file but you won't need to give it a unique name ( saving you a global search and replace)