Share via

Bootstrap dropdown menu and modal pop up not working when using bootstrap reference file in ASP.NET

BeUnique 2,292 Reputation points
2025-01-22T16:52:06.3566667+00:00

I'm using bootstrap dropdown menu and also using modal popup inside the gridview.i used below bootstrap reference for modal popup.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

The above reference will work for modal pop.

But, bootstrap dropdown menu and sub menu not coming properly. (alignment and font is changing)

if i removed the above reference, dropdown menu is working. but, modal popup not coming.

what is the problem and how to solve this...?

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,590 questions
Accepted answer
  1. AgaveJoe 29,776 Reputation points
    2025-01-22T18:26:15.46+00:00

    Give some examples which contains dropdown menu with sub menu and it's pages.

    The Bootstrap links you provide work perfectly. 

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormsDemo2.Bootstrap.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Dropdown
                <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
        </div>
        <div>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                Launch demo modal
            </button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

    I'm guessing you have CSS and/or JS conflicts. Use the browser's dev tools to figure out what's going on. If you need community debugging support then we'll need enough code to reproduce the unwanted behavior. Otherwise we can only guess how your code works.

    0 comments

4 additional answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 70,776 Reputation points
    2025-01-22T17:06:46.0366667+00:00

    the drop-down and modal also require the bootstrap.js file. be sure the js version matches the css version and that you are not including the files twice or two different version of either file.

    note: bootstrap version 3 has been out for support since 7/24/2019.

  2. SurferOnWww 3,816 Reputation points
    2025-01-22T22:35:11.8066667+00:00

    What is the version of Visual Studio? What is the template of Visual Studio used to create the project? Some of templates includes Bootstrap.css and .js by default.

    For example, the following templates in Visual Studio Version 17.12.4 will create ASP.NET Web Forms project which includes the Bootstrap.css v5.2.3 and Bootstrap.js v5.2.3.

    enter image description here

    enter image description here

    As long as you use the Site.Manter the resultant html source includes the Bootstrap.css v5.2.3 and Bootstrap.js v5.2.3 as shown below. In such case you should not add the link tag shown in your question.

    enter image description here

    enter image description here

  3. SurferOnWww 3,816 Reputation points
    2025-01-23T03:41:53.92+00:00

    As mentioned in my comment above, the ASP.NET Web Forms project created using the template in Visual Studio Version 17.12.4 includes the Bootstrap.css v5.2.3 and Bootstrap.js v5.2.3 by default.

    As long as the master page Site.Manter is used the resultant html source automatically includes the Bootstrap.css v5.2.3 and Bootstrap.js v5.2.3.

    Shown below is sample code which shows the Bootstrap Dropdown and Modal in single page. I just copied the samples in the Bootstrap documents Dropdowns and Modal, and pasted them to .aspx page which uses the master page Site.Manter.

    Please note that the popper.js is required to make the Bootstrap Dropdown workable as described in the Bootstrap document Dropdowns. Therefore, script tag is added to obtain the poper.js from popper.js in cdnjs.

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master"
    AutoEventWireup="true" CodeBehind="Bootstrap.aspx.cs"
    Inherits="WebForms5.Bootstrap" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js" 
        integrity="sha512-TPh2Oxlg1zp+kz3nFA0C5vVC6leG/6mm1z9+mA81MI5eaUVqasPLO8Cuk4gMF4gUfP5etR73rgU/8PNMsSesoQ==" 
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <h1>Boorstrap 5.2.3 Dropdown and Modal</h1>

    <p>Sample code in "Single button" section</p>

    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown button
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </div>

    <hr />

    <p>Sample code in "Live demo" section</p>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

</asp:Content>

    The results are:

    enter image description here

    enter image description here

    0 comments
  4. SurferOnWww 3,816 Reputation points
    2025-01-23T03:45:22.0333333+00:00

    As mentioned in my comment above, the ASP.NET Web Forms project created using the template in Visual Studio Version 17.12.4 includes the Bootstrap.css v5.2.3 and Bootstrap.js v5.2.3 by default.

    As long as the master page Site.Manter is used the resultant html source automatically includes the Bootstrap.css v5.2.3 and Bootstrap.js v5.2.3.

    Shown below is sample code which shows Bootstrap Dropdown and Modal in a page. I just copied the samples in the Boorstrap documents Dropdowns and Modal, and pasted them to .aspx page which uses the master page Site.Manter.

    Please note that the popper.js is required to make the Bootstrap Dropdown workable as described in the Bootstrap document Dropdowns. Therefore, script tag is added to obtain the poper.js from popper.js in cdnjs.

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master"
    AutoEventWireup="true" CodeBehind="Bootstrap.aspx.cs"
    Inherits="WebForms5.Bootstrap" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js" 
        integrity="sha512-TPh2Oxlg1zp+kz3nFA0C5vVC6leG/6mm1z9+mA81MI5eaUVqasPLO8Cuk4gMF4gUfP5etR73rgU/8PNMsSesoQ==" 
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <h1>Boorstrap 5.2.3 Dropdown and Modal</h1>

    <p>Sample code in "Single button" section</p>

    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown button
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </div>

    <hr />

    <p>Sample code in "Live demo" section</p>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

</asp:Content>

    The results are:

    enter image description here

    enter image description here

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.