You are including the bootstrap css twice. Which version of bootstrap is in -/lib.
Looks like you are using bootstrap 4 syntax with bootstrap 5 or bootstrap 5 css with bootstrap 4
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
I am learning developing responsive websites in ASP.NET and Bootstrap and here I tried to develop a basic navigation bar. But I couldn't collapse it as the 'data-toggle' and 'data-target' are not working. Please help me and also give suggestion if there is any other issue in my code.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<environment include="Development">
<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/twitter-bootstrap/js/bootstrap.js"></script>
</environment>
<environment exclude="Staging,Production">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
asp-fallback-href="~/lib/twitter-bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="se-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute"
asp-suppress-fallback-integrity="true" >
</environment>
<title>@ViewBag.Title</title>
</head>
<body>
<nav class="container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" asp-action ="Index" asp-controller="Home">
<img src="~/images/employees.png" height="30" width="30"/>
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a asp-action ="Index" asp-controller="Home" class="nav-link" >List</a>
</li>
<li class="nav-item">
<a asp-action ="Create" asp-controller="Home" class="nav-link" >Create</a>
</li>
</ul>
</nav>
</nav>
<div >
@RenderBody()
</div>
@RenderSection("newsec",false)
</nav>
</body>
</html>
You are including the bootstrap css twice. Which version of bootstrap is in -/lib.
Looks like you are using bootstrap 4 syntax with bootstrap 5 or bootstrap 5 css with bootstrap 4
Hi @MuntakimurRahman-4621,
You can refer the following sample screenshots:
Bootstrap 4 style:
Bootstrap 5 style:
As we can see that, when using Bootstrap 4, it will use the data-toggle
and data-target
to collapse The Navigation Bar. But if use Bootstrap 5, it will use the data-bs-toggle
and data-bs-target
attribute.
From your code, it seems that you are using the Bootstrap 4 syntax, if that is the case, first, check the installed bootstrap, make sure it's using the Bootstrap 4. Then, rebuild your application and in the debug mode use F12 developer tools to check whether the Bootstrap reference add success.
Or you can use the following CDN reference: (There is a space after <
, please remember to delete it.)
< link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
< script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
< script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
< script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Dillion