navigation bar is not displaying after upgrading content cssltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset34utf834 gt ltmeta name34viewport34 content34widthdevicewidth initialscale1034gt lttitlegtViewBagTitle My ASPNET Applicationlttitlegt ltlink href34ContentSitecss34 rel34stylesheet34 type34textcss34 gt ltlink href34Contentbootstrapmincss34 rel34stylesheet34 type

Hi akhterPlease refer below sampleHTMLltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset34utf834 gt ltmeta name34viewport34 content34widthdevicewidth initialscale1034gt lttitlegtViewBagTitle My ASPNET Applicationlttitlegt ltlink rel34stylesheet34 href34httpscdnjsdelivrnetnpmbootstrap461distcssbootstrapmincss34 gt ltscript src34httpscdnjsdelivrnetnpmjquery360distjqueryslimminjs34gtltscriptgt ltscript src34httpscdnjsdelivrnetnpmpopperjs1161distumdpopperminjs34gtltscriptgt ltscript src34httpscdnjsdelivrnetnpmbootstrap461distjsbootstrapbundleminjs34gtltscriptgt ltlink rel34shortcut icon34 href3434 gt ltstylegt ul liststyle none padding 0 margin 0 li paddingleft 16px

[Solved] Bootstrap Navigation bar is not displaying in ASP.Net Core MVC

akhter

SOLVED CLOSED ACTIVE ANSWERED
User: akhter
Posted: on Oct 10, 2022 10:46 PM
Forum: ASP.Net Core MVC
Answer: 1
Views: 4411

navigation bar is not displaying, after upgrading content css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
  
    <script src="~/Scripts/modernizr-2.6.2.js"></script>

    <link rel="shortcut icon" href="#" />

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home") </li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Service", "Service", "Home")</li>
                    <li>@Html.ActionLink("Room", "Index", "Room")</li>
                    <li>@Html.ActionLink("Booking", "Index", "Booking")</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

KasimA

0 2

Reply
ANSWER
User: KasimA
Replied: on Oct 10, 2022 11:47 PM
Report

Hi akhter,

Please refer below sample.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <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>
    <link rel="shortcut icon" href="#" />
    <style>
        ul {
            list-style: none; 
            padding: 0;
            margin: 0;
        }

        li {
            padding-left: 16px;
        }

            li::before {
                content: "•"; 
                padding-right: 8px;
                color: blue;
            }
    </style>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar">Home</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home") </li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Service", "Service", "Home")</li>
                    <li>@Html.ActionLink("Room", "Index", "Room")</li>
                    <li>@Html.ActionLink("Booking", "Index", "Booking")</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>    
</body>
</html

Screenshot

[Solved] Bootstrap Navigation bar is not displaying in ASP.Net Core MVC

Company

Explore

Follow us

Contact Us