min-width for column in Bootstrap grid system [duplicate]

Question

Bootstrap columns are flex items.
You have to decide on one column which should shrink when the others have reached their min-width.

For your example i chose the last one, “Due date” which normaly should be column-sm-7.
I give it the non-fixed column size “col”, which will fill (flex-grow) the available space. In this example it would by default have 7 columns of space. 12 columns - 4 columns - 1 column = 7 columns

More importantly though it will start shrinking when the other columns reached their min-width.

<div class="row">
  <div class="col-sm-4" style="min-width: 66px;">Name</div>
  <div class="col-sm-1" style="min-width: 120px;">Instance name</div>
  <div class="col" style="min-width: 87px;">Due date</div>
</div>

here is a codepen i made: https://codepen.io/timar/pen/VQWmQq/

what is also possible is to manually override the bootstrap column flex-properties like: gving the column 'col-sm-1' and style="flex-grow: 1; max-width:100%;"

Leave a Comment Cancel reply