Centering navbar links in bootstrap

Question

I want to center my links on mobile view (md and down view) of my navbar but I can't seem to find a solution for it. I am using bootstrap v4-alpha

  <div class="container-fluid p-b-3">

    <nav class="navbar navbar-full  navbar-fixed-top navbar-light bg-faded">


        <ul class="nav navbar-nav">

            <li>
                <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" data-toggle="modal" data-target="#myModal" style="cursor:pointer;">LINK 3</a>
            </li>
            <li>
                <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#kontakti">LINK 2</a>
            </li>
            <li>
                <a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#produktet">LINK 1</a>
            </li>
        </ul>

    </nav>


</div>

Here's the codepen link

Answer 1

You can achieve it using flexbox.

Here's a working pen I created: http://codepen.io/anon/pen/bwbpNx

CSS

.navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

I think this is one of the proper way to do it. So that, if you add another link. It will remain at center. Hope it helps. Cheers!

Answer 2

Use media query and override styles to make your links center aligned.

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css'); @media (max-width: 767px) { .navbar ul { text-align: center; } .navbar ul li { display: inline-block; vertical-align: top; padding: 0 10px; } .navbar ul li a { margin-left: 0 !important; } } 

 <div class="container-fluid pb-3"> <nav class="navbar navbar-full navbar-fixed-top navbar-light bg-faded"> <ul class="nav navbar-nav"> <li> <a class="nav-item nav-link pull-xs-right ml-2 font-weight-bold" data-toggle="modal" data-target="#myModal" style="cursor:pointer;">LINK 3</a> </li> <li> <a class="nav-item nav-link pull-xs-right ml-2 font-weight-bold" href="#kontakti">LINK 2</a> </li> <li> <a class="nav-item nav-link pull-xs-right ml-2 font-weight-bold" href="#produktet">LINK 1</a> </li> </ul> </nav> </div>