Unable to set dropdown boundary in Bootstrap 5

Question

I had the following markup working 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>

However, when I upgraded to Bootstrap 5, the dropdown no longer opens.

I figured out that I need to change the data-toggle attribute to use the data-bs-toggle attribute instead. Now the dropdown works.

However, the data-boundary="viewport" attribute no longer works. This attribute allows the dropdown to extend outside the container element. As it is now, the dropdown is cut off when its bounds fall outside of the container.

I tried using data-bs-boundary="viewport" and data-bs-boundary="body" as suggested in this question.

Does anyone know how to use this attribute in Bootstrap 5?

Update:

This is how Bootstrap is included in a new project created 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>

Does this answer your question? [How to append the bootstrap 5 dropdown menu to a specific element. when the dropdown element is inside an element with overflow: hidden](https://stackoverflow.com/questions/71031318/how-to-append-the-bootstrap-5-dropdown-menu-to-a-specific-element-when-the-drop) — HDP, May 20 '22 at 10:19

Rok Benko · Answer 1 · 2022-05-18T20:12:41.870

1

I see two possible solutions:

1. Change the Popper version via CDN

According to the most upvoted answer from this question, this happens because of the Popper version. Boostrap 4.6 uses Popper 1.16.1 (link) while Bootstrap 5 uses Popper 2.9.2 (link). Try changing the Popper version.

2. Take a look at the Popper docs

Try setting the area to something other than the body (link).

Let me know if this is helpful.

EDIT

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <!-- Popper version from Bootstrap 4.6 -->
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
      integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>

  </body>
</html>

edited May 18 '22 at 20:12

answered May 18 '22 at 09:39

Rok Benko

14,265
2
24
49

Thanks. Can you tell me how do I override the version of Popper that Bootstrap is using? – Jonathan Wood May 18 '22 at 15:54
I updated my answer. Not really sure if this will be of any help. I see that you were asking the other guy with the same problem and yet no solution was found. Try and let me know. – Rok Benko May 18 '22 at 20:08
I appreciate the response but I'm clearly missing something. Right now, I have Bootstrap working fine (aside from the data-bs-boundary issue). And I don't see any references to popper. It's hard to understand how you are overriding something that doesn't get referenced. – Jonathan Wood May 19 '22 at 04:43
Please update your question with a screenshot of your HTML where you add Bootstrap into your project. Popper is definitely referenced, but maybe in a bundle (https://getbootstrap.com/docs/5.0/getting-started/introduction/#js). – Rok Benko May 20 '22 at 08:40
I've added the markup to my question. This is the markup created automatically by Visual Studio when creating an ASP.NET Core web application. – Jonathan Wood May 20 '22 at 16:25
Looks like Bootstrap JS isn't added inside the ``, only CSS. I'm not familiar with ASP.NET. Try to find where Bootstrap JS is added to your ASP.NET project. It has to be somewhere, otherwise Bootstrap animations/effects would not work, only styles. This might help you: https://aspnetcore.readthedocs.io/en/stable/client-side/bootstrap.html – Rok Benko May 22 '22 at 10:54

Unable to set dropdown boundary in Bootstrap 5

1 Answers1