bootstrap5 nav-link not color blue and not hovering
Question
i added bootstrap5 CDN link to study bootstrap nav, but when i added nav-link to my link tag, its has the right styles except that the blue colour is absent and its not hovering. but same code works well in W3schools and codeply.com. pls i need a hand here
this is my work
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
`<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>`
<body>
`<h1>Hello, world!</h1>
<nav class="navbar navbar-expand-lg>
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Link 3</a>
</li>
</ul>
</div>
</nav>`
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
1 answers
solution1
0 2022-12-01 06:58:17
try with this: you are missing class="navbar navbar-expand-lg" of the end "
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Link 3</a>
</li>
</ul>
</div>
</nav>`
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Remove bootstrap nav-link hover background color
Bootstrap 4 - Highlight active nav-item/nav-link
How to move nav-link to the right in bootstrap4?
activate and deactivate nav-link bootstrap in html jquery?
Bootstrap 4 navbar - collapse on nav-link click in vanilla JS
Toggle active nav-link
Bootstrap nav-link class is not working in Chrome, but works in Firefox, navigates to corresponding section
Bootstrap JS dynamic tabs- every nav-link change the same element
Bootstrap: nav-link does not get hidden when dropdown-item is selected
add active to collapsible nav-link
Related Tags