Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center navbar in Bootstrap 4 using Flexbox

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>
like image 996
Parker Queen Avatar asked Feb 11 '17 15:02

Parker Queen


People also ask

How do I center the navbar in Bootstrap 4?

Add the .justify-content-center class to center the navigation bar. The following example will center the navigation bar on medium, large and extra large screens. On small screens it will be displayed vertically and left-aligned (because of the .navbar-expand-sm class):

How do I align navbar items to the right in bootstrap 4?

ml-auto class in Bootstrap can be used to align navbar items to the right. The . ml-auto class automatically aligns elements to the right.


1 Answers

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

like image 65
Zim Avatar answered Oct 21 '22 03:10

Zim