CODEWITHSUNDEEP
bootstrap-4navbar
Kelly
Kelly

Reputation: 63

Bootstrap 4 navbar nav-items are right next too each other

I'm new to working with bootstrap 4. i have simple menu, two items and they are being displayed right next too each other. 

    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    @Html.ActionLink("Web", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                @Html.ActionLink("Home", "Index", "Home", null, new { @class = "navbar-link" })
                <span class="sr-only">(current)</span>
            </li>
            <li class="nav-item">
                @Html.ActionLink("Holly", "CreateSpreadsheet", "Oper", null, new { @class = "navbar-link" })
            </li>
        </ul>
        <span class="navbar-text ml-auto">
            Hello, @User.Identity.Name.Split('\\')[1]!
        </span>
    </div>
</nav>

it's displaying this: 1

any idea why this is happening?

Upvotes: 0

Views: 1115

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362390

The class name for the links should be nav-link instead of navbar-link.

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    <a href="" class="navbar-brand">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a href="" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
               <a href="" class="nav-link">Holly</a>
            </li>
        </ul>
        <span class="navbar-text ml-auto">
            Hello
        </span>
    </div>
</nav>

https://www.codeply.com/go/pFjAim87gL

Upvotes: 1

Related Questions