1

I want to horizontally center a navbar in an ASP.Net Core MVC Web app. I have tried a ton of different things, but nothing is working.

Left and right justify work as expected. However, there is no obvious option for navbar-center (or something equivalent). Since Bootstrap is included in VS2017, I want to modify the CSHMTL - not .css.

There must be an easy way to do this. What am I missing?

<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color:white; border-color: white">

    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>


        <!-- This is what I want to center. Navbar-right and navbar-left work perfectly. -->
        <div class="navbar-collapse collapse" style="background-color:white; border-color: white">
            <ul class="nav navbar-nav navbar-left" style="background-color: white;  border-color: white">
                <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                <li><a asp-action="Create">Create</a></li>
            </ul>
        </div>
    </div>
</nav>
C.H.
  • 367
  • 1
  • 3
  • 8

3 Answers3

0

have you tried ?

    margin-left: auto;
    margin-right: auto;
David
  • 112
  • 1
  • 8
0

you are not going to get away from not modifying the CSS, basically you can override it with the Site.css in the site or modify directly in the bootstrap css

Center content in responsive bootstrap navbar

Community
  • 1
  • 1
mvermef
  • 3,814
  • 1
  • 23
  • 36
0

just Delete in file : nav-menu.component.css

.main-nav { height: 100%; width: calc(25% - 20px); }

maroine chérif
  • 26
  • 3