9

Well, I want to achieve this thing:

using the Bootstrap 4 Navbar.

How can I centralize the nav-links/items in the middle of the viewport using the flexbox or .mr-auto etc utilities. I am trying to avoid a CSS based positioning approach because it may look off on different devices. But sure if a CSS approach promises to be at the same centralized position then why not!

NOTE: some ppl might say to use the justify utilities, the problem is you can't use them as the .navbar-brand and the .navbar-nav can't be wrapped inside a <div>. If I do so, the layout messes up.

<nav class="navbar navbar-toggleable-md navbar-light bg-custom card-shadow-bottom">

    <div class="container">

        <button class="navbar-toggler navbar-toggler-right" 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>

        <a class="navbar-brand" href="#"><img src="img/nav-logo.png" alt="logo" class="nav-logo"></a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Disabled</a>
                </li>
            </ul>
        </div>

    </div>

</nav>
Wahyu Kristianto
  • 8,719
  • 6
  • 43
  • 68
Parker Queen
  • 619
  • 2
  • 12
  • 27
  • I have edited the qs, i tried to add mr-auto and ml-auto but it doesnt work. Moreover, I have also tried using the grid by wrapping the brand div and the nav-item div but then the nav-items get forced to the next line. help – Parker Queen Feb 11 '17 at 15:24
  • the image I gave was from a template which is what I am trying to achieve...without the colors and styles, just the layout of that navbar.... – Parker Queen Feb 11 '17 at 15:27
  • Ok so what do want see when the hamburger icon is clicked? Just the centered links or the social icons too? Again the example doesn't have the same components as the image so it's completely different. – Carol Skelly Feb 11 '17 at 15:30
  • Please don't post the [same question twice](http://stackoverflow.com/questions/42176330/bootstrap-4-how-to-centralize-nav-items-using-flexbox). – Carol Skelly Feb 11 '17 at 15:38

1 Answers1

5

Use the flexbox utilities to align components the way you want. Here the justify-content-center is used to center the navbar-nav.

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-primary justify-content-between">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand">Brand</a>
    <div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-toggle="collapse">Link</a>
            </li>
        </ul>

    </div>
    <ul class="nav navbar-nav flex-row">
        <li class="nav-item"><a class="nav-link pr-3" href=""><i class="fa fa-facebook"></i></a></li>
        <li class="nav-item"><a class="nav-link" href=""><i class="fa fa-twitter"></i></a></li>
    </ul>
</nav>

More Navbar alignment examples

Update Bootstrap 4.0.0

navbar-toggleable-sm is now navbar-expand-md
navbar-inverse is now navbar-dark
navbar-fixed-top is now fixed-top

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624