How to make bootstrap v4 tabs stay on the same row when window is reduced?

Question

css

<div class="list-group list-group-root">

                <a class="list-group-item">

                    {{room.users.length}} users, {{ onlineUsersCounter(room)}} online</span>
                    <span class="badge badge-primary badge-pill float-right mt-1">Text...</span>                  

                </a>

       </div>

When reducing the size of the viewport, these tabs, if there are enough of them, are arranged in 2-3 rows. Please tell me how to make them behave like tabs in the browser: left-right arrows would appear and the ability to scroll through them.
Thank you.

Answer 1

Out of the box - nothing.
By resizing, you can calculate what does not fit and put it in a hamburger so that it appears as in the example here:
getbootstrap.com/docs/4.1/components/navbar/#exter...