I have a container with two rows inside. One of those rows contains several columns. My goal is to have four columns per line on mobile devices, which I achieved using "row-cols-4". However, on larger screens, I want all the columns to be on the same line, so I tried using "row-cols-md-auto" for that purpose. The issue is that the row does not fill the container as shown in the image below:
https://i.sstatic.net/8Haga.jpg
Using Bootstrap v5.2, this is a snippet of my code:
<div class="container text-center bg-white">
<div id="menu" class="row row-cols-4 row-cols-md-auto sticky-top mt-5">
<button id="faq1" class="col p-2 p-md-3 border" href="#">FAQ1</button>
<button id="faq2" class="col p-2 p-md-3 border" href="#">FAQ2</button>
<button id="faq3" class="col p-2 p-md-3 border" href="#">FAQ3</button>
<button id="faq4" class="col p-2 p-md-3 border" href="#">FAQ4</button>
<button id="faq5" class="col p-2 p-md-3 border" href="#">FAQ5</button>
<button id="faq6" class="col p-2 p-md-3 border" href="#">FAQ6</button>
<button id="faq7" class="col p-2 p-md-3 border" href="#">FAQ7</button>
<button id="faq8" class="col p-2 p-md-3 border" href="#">FAQ8</button>
</div>
<div id="viewer" class="row">
<div class="include-html"></div>
</div>
</div>
Any suggestions on how I can make the row fill the container on desktop screens?