Previously, I had this code working perfectly in Bootstrap 4.
<div class="dropdown">
<span type="button" class="dropdown" data-toggle="dropdown" data-boundary="viewport">
<img src="~/images/menu.png" title="Menu" />
</span>
<div class="dropdown-menu dropdown-menu-right">
<a asp-page="AddBol" class="dropdown-item">Manual Entry</a>
</div>
</div>
Upon switching to Bootstrap 5, the dropdown ceased to function as expected.
After some troubleshooting, I discovered that the data-toggle attribute needed to be updated to data-bs-toggle. Making this change resolved the issue, and the dropdown now operates correctly.
However, I encountered an obstacle with the
data-boundary="viewport"Various sources recommend using
data-bs-boundary="viewport"data-bs-boundary="body"If anyone has insights on how to effectively utilize this attribute in Bootstrap 5, please share!
Update:
This is how Bootstrap is integrated in a new project generated by Visual Studio.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - TempAspNet</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/TempAspNet.styles.css" asp-append-version="true" />
</head>