locked
Bootstrap navbar not working in asp.net core RRS feed

  • Question

  • User1153554953 posted

    Hello, I am trying bootstrap first time on my asp.net core website, but navbar isnt working as expected. Kindly have a look

    index.cshtml:

    <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/cas">DinghyBases</a>
                </div>

                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/Home/index">Home</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                Edit Static Pages
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="cas/EditGeneral/1">Main Page</a></li>
                                <li><a href="cas/EditGeneral/2">History Page</a></li>
                                <li><a href="cas/EditGeneral/3">Racing Page</a></li>
                                <li><a href="cas/EditGeneral/4">Story Page Page</a></li>
                            </ul>
                        </li>
                        <li><a asp-action="ListDinghies">Dinghies</a></li>
                        <li><a asp-action="ListSchools">Sailing Schools & Sail Centres</a></li>
                        <li><a asp-action="ListManufacturers">Manufacturers</a></li>
                        <li><a asp-action="ListClassAssociations">Class Associations</a></li>
                        <li><a asp-action="ListLinks">Other Links</a></li>
                        <li><a asp-action="ListResorts">Resorts</a></li>
                        <li><a asp-action="ListBooks">Books</a></li>
                        <li><a asp-action="ListAds">Advertisements</a></li>
                    </ul>
                </div>
    </nav>

    Layout page:

    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    </head>
    <body>

            @RenderBody()
    </body>
    </html>

    Output: Screenshot available at https://ibb.co/djf7T1Y

    Friday, October 23, 2020 9:42 AM

All replies

  • User-10629849 posted

    Hello
    Inflate bootstrap files into your html
    1- bootstrap.min.css
    2- jquery.min.js
    3- bootstrap.min.js
    Arrange in order
    And the bootstrap menu must use jquery and js to work...

    Friday, October 23, 2020 11:11 AM
  • User1153554953 posted

    Hello
    Inflate bootstrap files into your html
    1- bootstrap.min.css
    2- jquery.min.js
    3- bootstrap.min.js
    Arrange in order
    And the bootstrap menu must use jquery and js to work...

    Whats the need of these files when I am using Bootstrap CDN?

    Friday, October 23, 2020 12:16 PM
  • User475983607 posted

    The JavaScript references are in the wrong order.  jQuery must come first.  Please see the Bootstrap documentation which explains how to include Bootstrap.

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    Typically, JavaScript references are located at the bottom of the page not the header.  Lastly, please use the "Insert/Edit code" button when sharing code on the forum.  It makes the code much easier to read.

    Friday, October 23, 2020 1:23 PM
  • User-474980206 posted

    Also the simplest browser debugging would have given script errors that indicated jquery was not defined. 

    please learn to use browser debugging.

    Friday, October 23, 2020 2:59 PM
  • User1153554953 posted

    The JavaScript references are in the wrong order.  jQuery must come first.  Please see the Bootstrap documentation which explains how to include Bootstrap.

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    Typically, JavaScript references are located at the bottom of the page not the header.  Lastly, please use the "Insert/Edit code" button when sharing code on the forum.  It makes the code much easier to read. Updated layout page is as follows. The output is same as I described earlier

    I have made the changes as you mentioned, but still there is no difference, checked out the bootstrap guide too, I think I am doing everything right.

    <!DOCTYPE html>
    
    <html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>@ViewBag.Title</title>
    </head>
    <body>
    
        @RenderBody()
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
    </html>
    

    Saturday, October 24, 2020 2:52 AM
  • User475983607 posted

    I have made the changes as you mentioned, but still there is no difference, checked out the bootstrap guide too, I think I am doing everything right.

    Your original code threw an error and controls like the drop down were not working.  What exactly is the problem?  The navigation bar does not look correct?

    Usually, the navigation menu is in the _layout page and common to all pages.  Use Visual Studio to create a standard MVC project then take a look at the layout page.

     

    Saturday, October 24, 2020 10:22 AM
  • User1153554953 posted

    Yes I am also using nav bar in layout page, but it is not looking normal. I have included the link to screenshot in my first post on this thread.

    najum98

    I have made the changes as you mentioned, but still there is no difference, checked out the bootstrap guide too, I think I am doing everything right.

    Your original code threw an error and controls like the drop down were not working.  What exactly is the problem?  The navigation bar does not look correct?

    Usually, the navigation menu is in the _layout page and common to all pages.  Use Visual Studio to create a standard MVC project then take a look at the layout page.

     

    Saturday, October 24, 2020 11:37 AM
  • User475983607 posted

    Yes I am also using nav bar in layout page, but it is not looking normal. I have included the link to screenshot in my first post on this thread.

    This is a support forum.  We cannot read your mind.   The original code has clear errors.   So we thought that was the "unknown" problem 

    Anyway, I recommend going through the Getting Started tutorials on this site.  The tutorials illustrate work with the Bootstrap navigation menu.

    ASP.NET MVC

    https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started

    https://docs.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/

    ASP.NET Core

    https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/start-mvc?view=aspnetcore-3.1&tabs=visual-studio

    The Bootstrap docs also illustrate how to build an HTML design that uses the navigation menu.  The example navigation menu below was copied from the Bootstrap site.

    https://getbootstrap.com/docs/4.0/components/navbar/

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index2</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        
    </head>
    <body>
    
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
    
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>
    
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    </body>
    </html>
    

    Saturday, October 24, 2020 12:53 PM