Ndtyjky

Having the following navbar in boostrap 4:

<nav class="navbar navbar-expand text-light bg-secondary">

<ul class="navbar-nav">

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">A</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">B</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">C</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">D</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">E</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">F</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">G</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">H</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">I</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">J</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">K</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">L</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">M</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">N</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">O</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">P</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">Q</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">R</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">S</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">T</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">U</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">V</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">W</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">X</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">Y</a></li>

    <li class="nav-item ml-1 mr-1"><a href="#" class="btn btn-sm btn-outline-light">Z</a></li>

</ul>

</nav>

On large screen, content looks good since all elements are shown. However, on small size screens, only the starting elements are shown since they fit in the width of the screen, while the remaining ones are hidden outside the viewport and a user has to scroll right to see them.

How to style this navbar in a responsive way, when the screen size is small, let the elements that do not fit, go into a new row below the shown elements. Since there are more than 12 elements, I could not use the bootstrap grid concept to solve it. In addition, I count on having a dynamic number of elements and want the content to be center displayed.

You can achieve this using flexbox, by default the navbar-nav class has a flex-wrap: no-wrap, that means that the nav items will never go below, what you can do to fix this is

.navbar-nav{

  flex-wrap: wrap;

}

Instead of no wrap, you can set flex-wrap: wrap;, and that should work, now you need to style the nav-items for this to look good, hope this help you.

Here you have an article that will help you to understand how flexbox work

And to align content center, add justify-content-center class to nav element

<nav class="navbar navbar-expand text-light bg-secondary justify-content-center">