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

Question

I have following HTML with Bootstrap CSS.

<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-sm-7" style="min-width: 87px;">Due date</div> </div> 

Without 'min-width' a width of the second column in some cases is less than 120px and 'Instance name' isn't fully visible. So that I've added 'min-width' and width of row becomes more than 100% in that cases. The last column is wrapped into new line.

I want to have bootstrap dynamic column width and that Instance name doesn't disappeared when I reduce browser window size. How can I achieve such behavior?

Answer 1

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%;"