natinusala natinusala - 23 days ago 4x
HTML Question

Having a fluid Bootstrap grid in a HTML table row

I have a table which takes the whole screen width. In each table row, there is a Bootstrap 3 grid within a panel.

The problem is that the table column is too thick to contain my Bootstrap grid, and the result is this :

enter image description here

Here we see that the last button is overlapping the table row, going too far. But if I switch to my 24" monitor, there is no longer this problem since the screen is wider and therefore the table rows are wider too. It's the same if I remove some table rows, they will be wider and it will not overlap.

So my question is : is there a way to have a dynamic and fluid grid system which would automatically arrange the Bootstrap grid so it would not overlap ?

Here is a Codepen to illustrate the problem :

I would like the panels to have two buttons per row instead of crushing four together, but if we enlarge the table or remove some panels then it would show 3 or 4 buttons per row.


Have you tried:

<div class="container-fluid">
   <div class="row">


I think I understand now (really hard from such a small screen shot and no code example).

The button(s) is wider than the column when in narrow viewports and you want that column only to remain wider.

Unfortunately, not how it's designed. Each column is a particular % of the full container width - nothing to do with the columns' content.

Depending on your browser support, Flexbox is the perfect solution here.

Otherwise, you will have to do something like:

  <div class="col-sm-6 col-md-4"> <span> col 1 with buttons <span> </div>
  <div class="col-sm-3 col-md-4"> <span> col 2 <span> </div>
  <div class="col-sm-3 col-md-4"> <span> col 3 <span> </div>

To force the first column wider for the sm viewport.