Row columns does not fill container - html

Question

I've one container with two rows inside. One of that rows has some columns. What I would like to do is have on mobile four columns per line. And that works fine with "row-cols-4". But for big screen, I would like to have all the columns on the same line, so I used "row-cols-md-auto" to do that. The problem is that the row does not fill the container as you can see in the image below:
I'm using Bootstrap v5.2 and 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>
What can I do to fill the container on the desktop screen?

Answer 1

The problem is that row-cols-md-auto will make the columns (buttons) shrink to the width of their content. Also Bootstrap doesn't offer a row-cols-md class to make the columns grow width on medium viewport size. Therefore, I don't think is possible using row-cols-*. Instead you could use a custom CSS class...
CSS...
#media (min-width: 768px) {
.row-cols-md>.col {
flex: 1 0 0%;
}
}
markup...
<div class="container text-center bg-white">
<div id="menu" class="row row-cols-4 row-cols-md 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>
OR
You can avoid the custom CSS and not use row-cols-*. Instead use the class grid sizes...
<div class="container text-center bg-white">
<div id="menu" class="row sticky-top mt-5">
<button id="faq1" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ1</button>
<button id="faq2" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ2</button>
<button id="faq3" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ3</button>
<button id="faq4" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ4</button>
<button id="faq5" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ5</button>
<button id="faq6" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ6</button>
<button id="faq7" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ7</button>
<button id="faq8" class="col-md col-3 p-2 p-md-3 border" href="#">FAQ8</button>
</div>
</div>
Demo: https://codeply.com/p/1B1abfyZ0q

Answer 2

Check also for div and your container class.
<>
<>Your Code</>
</>