How can I ensure a Bootstrap column expands to fit the width of its content when this value is changed?

Answer 1

In Bootstrap version 4.x, you can use col-sm-auto.

Answer 2

You can use Flexbox for that, making all children's width change depending on content:

.col-sm-2 { border:1px solid; }

@media screen and (min-width: 480px) {
  .flex { display: flex; flex-wrap: wrap; }
  .flex > .col-sm-2 { flex: 1; width: auto; }
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h2> RScheme </h2>
<div class="container-fluid">
  <div class="row flex">
    <div class="col-sm-2"><img src="http://placehold.it/200x200"></div>
    <div class="col-sm-2">Arrow</div>
    <div class="col-sm-2">Compound</div>
    <div class="col-sm-2">Arrow</div>
    <div class="col-sm-2">Compound</div>
    <div class="col-sm-2">Arrow</div>
  </div>
</div>

jsFiddle: http://jsfiddle.net/rbxth6ac/8/