CODEWITHSUNDEEP
htmlcssasp.net-mvctwitter-bootstraprazor
ev vk
ev vk

Reputation: 355

bootstrap 3.3.7 to 4beta2 : nav bar with razor not working

Good day,

I have an asp.net MVC project, which uses bootstrap 3.3.7. I want to migrate from that version to 4 beta 2, for doing thatI have used bootstrap from Get bootstrap . But I can see that my nav bar is broken. broken navbar

I am expecting to get something like this image( I got this nav bar from a default MVC project in visual studio 2015,which uses the bootstrap version3.3.7) bootstrap 3.3.7 navbar

This is the navbar code for v 4 beta 2:

    <div class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm">
    <div class="container">
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">&#x2630;</button>
        @Html.ActionLink("my page", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="nav-item">@Html.ActionLink("Home", "Index", "Home")</li>
                <li class="nav-item">@Html.ActionLink("About", "About", "Home")</li>
                <li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>

And this for v3.3.7

    <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("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>

I have included the scripts and css required using bundles:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/bootstrap")

Question:how can I fix my navbar? thank you.

Upvotes: 1

Views: 1014

Answers (1)

ev vk
ev vk

Reputation: 355

I updated the bootstrap package using nugget, to version 4, this is the code for a basic navbar that translates from v.3 to v.4

<nav class="navbar navbar-expand-lg navbar-light bg-light fix fixed-top">

    <div class="container">
        @Html.ActionLink("My page icon", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        <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">
                        @Html.ActionLink("one link", "Index", "controll1", null, new { @class = "nav-link" })
                    </li>
                    <li class="nav-item">
                        @Html.ActionLink("Manage other things", "Index", "controll2", null, new { @class = "nav-link" })
                    </li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</nav>

Upvotes: 1

Related Questions