min-width for column in Bootstrap grid system
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%;"
Not sure if there is such a way to accomplish what you want.
The col-sm-x
defines specific width percentages of your viewport, and if you provide custom values, then the accumulated width of all columns will either be more or less than 100%, which is not the desired behaviour.
Instead, you can provide multiple classes for the same div. Example:
<div class="row">
<div class="col-sm-4 col-xs-1">Name</div>
<div class="col-sm-1 col-xs-3">Instance name</div>
<div class="col-sm-7 col-xs-2">Due date</div>
</div>
If this is solution does not suffice, then you will most likely come up with a javascript solution of some sort that manually sets the width of the other divs.
There seems to be another, similar question previously posted here on stackoverflow. Have a look here.
Bootstrap Grid on W3Schools
Did you try changing your values for smaller resolutions? For example
<div class="col-lg-4 col-sm-4">Name</div>
<div class="col-lg-1 col-sm-2">Instance name</div>
<div class="col-lg-7 col-sm-6">Due date</div>
Bootstrap has options for different screen sizes, so you might want to check them out: http://getbootstrap.com/css/