Struggling to customize the navbar text color using bootstrap and CSS? Despite trying multiple methods, changing the navbar text color seems to only work with inline CSS. Seeking assistance in resolving this issue from anyone knowledgeable in web development.
<!DOCType html>
<html>
<head>
<title>My Second Class Assignment</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="navbar-brand" href="#">
<img src="image/logo.png" class="d-inline-block align-top" alt="Learn Xpert">
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PAGES</a>
</li>
<li class="nav-item">
<a class="nav-link text-blue" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link text-blue" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
<!---JavaScript--->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/bootstrap.min.js" rel="stylesheet"></script>
</body>
</html>
CSS File
/* CSS */
a{
color:#ff6347;
font-size: 20px;
}