Positioning Navbar buttons with Bootstrap 4 and Flexbox not working?

Question

Still getting my hands into Flexbox but I'm having a problem trying to working with a Navbar. What I'm looking for is to put the title of the site to the far left and then the buttons to the far right.

I've tried a few different combinations with flexbox but haven't been able to get it correctly. This is the last combination of code I used and I think it should be working this way but I must be missing something.

Here I have the Bootstrap Navbar declaration and then once inside the NavBar I have a flex container. Then using the space-between it should split them to the left and right. I even set the flex-grow:1 to try to get it to stretch the width of the viewport but it's not working.

.nav__container {
    display: flex;
    justify-content: space-between;

    &__title {
        flex-grow: 1;
    }

    &__buttons {
        flex-grow: 1;
    }
}



<nav class="navbar navbar-expand-md navbar-dark bg-primary navbar-static-top py-0 ">
    <div class="nav__container">
        <div class="nav__title">
            <a class="navbar-brand" href="@Url.Action("Index","Home")">Job Transfers</a>
        </div>

        <div class="nav__buttons">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index","Home")">My Transfer Requests</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("ViewTransferList","Transfer")">View Transfer Lists</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("BidRequests","Bid")">My Bid Requests</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("BidList","Bid")">Bid Postings</a>
                    </li>
                    @if ((bool)Session["IsAdmin"])
                    {
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Admin
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="@Url.Action("ViewBidList","Bid")">Employee Bids</a>
                                <a class="dropdown-item" href="@Url.Action("ViewRequestHistory","Transfer")">Request History</a>
                                <a class="dropdown-item" href="@Url.Action("ViewRecallRights","Transfer")">Recall Rights</a>
                            </div>
                        </li>
                    }

                </ul>
            </div>
        </div>
    </div>
</nav>

This is what I'm getting.

Carol Skelly · Accepted Answer · 2018-09-14T18:44:34.027

Just add w-100 (width:100%) to the nav_container. Also you don't need the extra CSS you can use d-flex for display:flex and ml-auto to keep the buttons/links to the right. The are also other flexbox utils.

<nav class="navbar navbar-expand-md navbar-dark bg-primary navbar-static-top py-0 ">
    <div class="nav__container w-100">
        <div class="nav__title">
            <a class="navbar-brand" href="">Job Transfers</a>
        </div>
        <div class="nav__buttons ml-auto">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="">My Transfer Requests</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">View Transfer Lists</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">My Bid Requests</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">Bid Postings</a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Admin
                            </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="">Employee Bids</a>
                            <a class="dropdown-item" href="">Request History</a>
                            <a class="dropdown-item" href="">Recall Rights</a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</nav>

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

Also see: Bootstrap NavBar with left, center or right aligned items

Both of these would work but went down this route with using more of the BS4 features.Thanks. — Caverman, Sep 14 '18 at 18:22

kukkuz · Answer 2 · 2018-09-14T17:20:53.527

Give width: 100% to nav__container so that the flexbox will be a full-width container - see demo below:

.nav__container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-primary navbar-static-top py-0 ">
    <div class="nav__container">
        <div class="nav__title">
            <a class="navbar-brand" href="@Url.Action("Index","Home")">Job Transfers</a>
        </div>

        <div class="nav__buttons">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index","Home")">My Transfer Requests</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("ViewTransferList","Transfer")">View Transfer Lists</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("BidRequests","Bid")">My Bid Requests</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("BidList","Bid")">Bid Postings</a>
                    </li>
                    
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Admin
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="@Url.Action("ViewBidList","Bid")">Employee Bids</a>
                                <a class="dropdown-item" href="@Url.Action("ViewRequestHistory","Transfer")">Request History</a>
                                <a class="dropdown-item" href="@Url.Action("ViewRecallRights","Transfer")">Recall Rights</a>
                            </div>
                        </li>
                    

                </ul>
            </div>
        </div>
    </div>
</nav>

Positioning Navbar buttons with Bootstrap 4 and Flexbox not working?

2 Answers2