how to set up a bootstrap 4 three column grid with fixed percentages

Question

I have a fairly normal Bootstrap 4 grid, dividing a row into 3 columns with equal width:

<div class="row">
  <div class="col-md-4">col-md-4</div>
  <div class="col-md-4">col-md-4</div>
  <div class="col-md-4">col-md-4</div>
</div>

(or using the Bootstrap 4 autolayout feature I could remove the "-md-4" part.

However, now I need to adapt the layout, so that the middle column is half of the width of the first or the last column:

| 40 % |20 %| 40 % |

If I would use the standard 12-column grid system, that would not add up (I would have to introduce 1/10 columns?): 4,8 | 2,4 | 4,8

Is there an (easy) possibility to achieve that? Do I have to redefine the Less/Sass Variables for the amounts of available columns and their widths? (which I would rather not, since I quite like the original grid system) - I imagined if I had a 10/20/../10x Grid System, I could very easily build it:

<div class="row"><!--10 equal width columns-->
  <div class="col-md-4">col-4</div>
  <div class="col-md-2">col-2</div>
  <div class="col-md-4">col-4</div>
</div>

Any help is appreciated!

Answer 1

There's no way with Bootstrap "out-of-the-box", but you could extend use of the auto-layout (.col) columns by setting a specific width...

.col-20 {
    flex: 0 0 20%;
    max-width: 20%;
}
.col-40 {
    flex: 0 0 40%;
    max-width: 40%;
}


<div class="row">
    <div class="col col-40">col</div>
    <div class="col col-20">col</div>
    <div class="col col-40">col</div>
</div>

https://www.codeply.com/go/cCakaqk7UP