Bootstrap 4 Grid - 3 Columns - 5.5 - 1 - 5.5

Question

Looks like half column sizing is doable in Boostrap 4.

I'm trying to do a basic responsive layout like the following. I realize they have to add to 12.

Column 1 (5.5) - Column 2 (1) - Column 3 (5.5)

This article seems to suggest it's possible? I want to ensure it keeps base gutters and spacing.

https://medium.com/wdstack/the-bootstrap-4-is-getting-odd-e9400b121719

What is the simplest way to achieve this? Something like:

<div class="row">
    <div class="col-55">
        Col 1 - 55%
    </div>
    <div class="col-05"> 
       Col 2 - 5%
    </div>
    <div class="col-55"> 
      Col 3 - 55%
    </div>
</div>

Answer 1

Use the auto-layout columns combined with the grid columns as explained in the article...

<div class="row">
    <div class="col">
        5.5
    </div>
    <div class="col-1">
        1
    </div>
    <div class="col">
        5.5
    </div>
</div>

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