Use "Variable width content" grid in Bootstrap 3

Question

I'm currently using Bootstrap 3.3.7 and because my site is huge it isn't easy to migrate to v4. Nevertheless I'd like to use the new Auto-Layout-columns (Variable width content) feature (see screenshot below).

Has anybody an idea for a workaround?

<div class="container-fluid">
    <div class="row">
      <div class="col-xs-6 col-xs-push-3 col-md-3">Fixed 250px</div>
      <div class="col-xs-6 col-xs-pull-3 col-md-3">Auto</div>
      <div class="col-xs-6 col-md-3">Auto</div>
      <div class="col-xs-6 col-md-3">Auto</div>
    </div>   
</div>

The auto-layout columns use flexbox. What have you tried so far to accomplish this? Can you post a minimal example of the 3.x code? — Carol Skelly, May 28 '18 at 12:22

score 9 · Accepted Answer · answered May 28 '18 at 13:13

You could add the flexbox CSS that makes the auto-layout columns work in Bootstrap 4...

CSS:

.d-flex {
    display:flex;
}
.d-flex>div {
    float: none;
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

Usage:

<div class="container">
    <div class="row d-flex">
        <div class="col-sm-3 bg-success">col-sm-3</div>
        <div class="col-auto">col-auto</div>
        <div class="col-sm-9 bg-success">col-sm-3</div>
    </div>
</div>

Demo:
https://www.codeply.com/go/cTTtpuItaM

Related: Bootstrap 3.0 - Fluid Grid that includes Fixed Column Sizes

Use "Variable width content" grid in Bootstrap 3

1 Answers1