I’m currently facing an issue where my custom CSS rules are not being applied after linking Bootstrap in my project. I am using Bootstrap CSS for a custom layout and need to incorporate my own styling as well.
When I link bootstrap.min.css followed by my style.css, the custom rules do not take effect. However, if I add my custom rules within a tag after linking bootstrap.min.css, everything works perfectly fine. I have verified that the file paths for my IDs and classes are correct.
Below, I present examples of both methods within the head tag of my HTML file:
This method does not work
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="favicon.ico">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel=“stylesheet” href=“css/style.css“>
This method works
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="favicon.ico">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style>
[custom css rules]
.
.
.
</style>
Any insights on why this might be happening would be greatly appreciated!