cssbootstrap-4flexboxbootstrap-5bootstrap-grid

Bootstrap 5 Horizontal Scroll for Multiple Rows


Container is scrollable only for half of the container. After that scrolling starts to affect navigation panel as well.

CSS:

  .horizontal-scrollable {
        overflow-x: auto;
        white-space: nowrap;
    }

HTML:

<div class="container horizontal-scrollable" style="border: 1px solid lime;">
    <div class="row flex-nowrap"  style="border: 5px solid gold">
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
            <div class="col" style="border: 1px solid red;">Column</div>
        </div>
    <div class="row flex-nowrap"  style="border: 5px solid gold">
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
            <div class="col" style="border: 1px solid red;">Column</div>
        </div>
    <div class="row flex-nowrap"  style="border: 5px solid gold">
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
            <div class="col" style="border: 1px solid red;">Column</div>
            <div class="col" style="border: 1px solid red;">Column</div>
        </div>
</div>

[Works, thus container is crollable while navigation is still][1] [1]: https://i.sstatic.net/vYKUY.png [Stopped working after some breakpoint, whole page is moving][2] [2]: https://i.sstatic.net/IgnTZ.png


Solution

  • You can try to make all the row div elements as inline, using display: inline-block; property.

    For your case, it would be like

    .horizontal-scrollable > .row > .col{
                display: inline-block;
    }
    

    Also, try changing the code from Horizontal-scrollable to the the row elements inside that div.

      .horizontal-scrollable > .row {
            overflow-x: auto;
            white-space: nowrap;
        }
    

    I found the this to be working for me. You can reference this here.