Bootstrap minimum width grid

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. This prevents elements moving to the next line.

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

In this case, we take the other span, reduce it to span1. Give it flex-grow and we have to overwrite bootstraps max-width property.

    
...
    
...

to be on the safe side you can reduce the second span only as much as necessary. i.e span6 . Adjust the max-width to the amount the normal span had, we had span8 100/12*8 = 66.66%