CODEWITHSUNDEEP
twitter-bootstrapgridbootstrap-4
mobis
mobis

Reputation: 143

Use "Variable width content" grid in Bootstrap 3

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?

bootstrap v4 doc screenshot

<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>

Upvotes: 5

Views: 8876

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362520

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

Upvotes: 9

Related Questions