Bootstrap Grid resizing moves to many columns at once

Question

I have a bootstrap responsive row that looks like this:

As I make my window thinner and thinner is resizes correctly at first and the next resize looks like this:

AS the window get small the next item goes to the next line. I like that, and it continues one column at a time:

but after 2 columns go to the next line, when I make the window smaller again, it then adds every column to its own line all at once.

I would like it to be more graceful and keep adding one at a time as they don't fit, and not have all of them on their own line. Its a lot of white space now.

My code currently looks like this:

  <div class="row" id="myBtnContainer"> 
    <div class="col-auto" style="padding: 5px"><button class="btn-filter active" onclick="filterSelection('all')"> Show all</button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kayaking')"> Kayaking </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('backpack')"> Backpacks </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('photography')"> Photography </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('shelter')"> Shelters </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('hydration')"> Hydration </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kitchen')"> Kitchen </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('electronics')"> Electronics </button></div>
  </div>

I have tried different combinations of the sm, md, lg, and xl tags but nothing seems to be able to make each item fall inline one at a time. It just jumps to all being on their own lines.

Update:

I tried some more attempts and noticed if I added the col-numbers to the different sizes in the row, it more or less behaved how I would like it to. But at the wider views it spaces out the buttons way to much, I liked them closer to each other:

  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5" id="myBtnContainer"> 
    <div class="col-auto" style="padding: 5px"><button class="btn-filter active" onclick="filterSelection('all')"> Show all</button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kayaking')"> Kayaking </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('backpack')"> Backpacks </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('photography')"> Photography </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('shelter')"> Shelters </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('hydration')"> Hydration </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kitchen')"> Kitchen </button></div>
    <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('electronics')"> Electronics </button></div>
  </div>

score 0 · Answer 1 · answered Jan 16 '21 at 17:36

do you mean something like this? i simply styled the btn-filter to a width of 100%. Hope this helped.

/*New lines of code */
.btn-filter{
      width:100%;
    }

<!DOCTYPE html>
<html lang = "en-uk">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    </head>
    
    
    <body>

        <div class = "container-fluid">
            <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-6 px-5" id="myBtnContainer"> 
                <div class="col-auto" style="padding: 5px"><button class="btn-filter active" onclick="filterSelection('all')"> Show all</button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kayaking')"> Kayaking </button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('backpack')"> Backpacks </button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('photography')"> Photography </button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('shelter')"> Shelters </button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('hydration')"> Hydration </button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kitchen')"> Kitchen </button></div>
                <div class="col-auto" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('electronics')"> Electronics </button></div>
              </div>
          </div>
        
        
        
        
        
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    </body>
    
</html>

score 0 · Accepted Answer · answered Jan 16 '21 at 17:44

After doing some more research and looking at these two stack overflow posts:

I was able to combine those two answer to get the affect I was looking for!

I had to use this CSS:

  .buttonSmush {
    max-width: max-content;
    min-width:auto;
    display:inline-block;
    vertical-align: top;
    }

And the html is:

  <div class="row" id="myBtnContainer"> 
    <div class="buttonSmush" style="padding: 5px "><button class="btn-filter active" onclick="filterSelection('all')"> Show all</button></div>
    <div class="buttonSmush" style="padding: 5px "><button class="btn-filter" onclick="filterSelection('kayaking')"> Kayaking </button></div>
    <div class="buttonSmush" style="padding: 5px "><button class="btn-filter" onclick="filterSelection('backpack')"> Backpacks </button></div>
    <div class="buttonSmush" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('photography')"> Photography </button></div>
    <div class="buttonSmush" style="padding: 5px"> <button class="btn-filter" onclick="filterSelection('shelter')"> Shelters </button></div>
    <div class="buttonSmush" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('hydration')"> Hydration </button></div>
    <div class="buttonSmush" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('kitchen')"> Kitchen </button></div>
    <div class="buttonSmush" style="padding: 5px"><button class="btn-filter" onclick="filterSelection('electronics')"> Electronics </button></div>
  </div>

Bootstrap Grid resizing moves to many columns at once

2 Answers2