boostrap col-auto taking up inordinate space

January 23, 2022

I’m having trouble understanding why col-auto is taking more space than the minimum required for its contents.

See this example http://jsfiddle.net/ugt0x5nf/6/. Note, rendered window must be widened to > 768px to see the issue.

See how the last column w/ col-md-auto takes up more space than is necessary to fit the <button> within it. See this screenshot.

Why? What I want to happen is the last column is exactly the width of the button and the rest of the other columns expand to compensate.

My code is like:

<form>
  <div class="form-row d-flex">
    <div class="col-md-1">
      <input class="form-control">
    </div>
    <div class="col-md-2">
      <input class="form-control">
    </div>
    <div class="col-md-4">
      <input class="form-control">
    </div>
    <div class="col-md-4">
      <input class="form-control">
    </div>
    <div class="col-md-auto">
      <button type="button" class="btn btn-link">X</button>
    </div>
  </div>
</form>

>Solution :

Consider:

<form>
  <div class="form-row d-flex">
    <div class="col-md-1">
      <input class="form-control">
    </div>
    <div class="col-md-2">
      <input class="form-control">
    </div>
    <div class="col w-100">
      <input class="form-control">
    </div>
    <div class="col w-100">
      <input class="form-control">
    </div>
    <div class="flex-shrink-1">
      <button type="button" class="btn btn-link">X</button>
    </div>
  </div>
</form>

With this, the two cols that were col-md-4 will stretch and the button col will shrink to the width of the button.