You apply the display: flex on your .form-row element, but the col-* classes (with flex: css rules) on the element inside the wrapper. flex: rules should be applied on the children of the display: flex.

You should apply the column classes on your wrapper element directly, not its children, using @HostBinding is probably the easier solution.

So, I was building a wrapper component around Bootstrap’s Input Group as follows:

@Component({
    selector: 'bootstrap-input',
    template: `
        <div class="{{ calculateColumns(cols) + ' input-group mb-3' }}">
            <div *ngIf="hasLabel" class="input-group-prepend">
                <span class="input-group-text">{{ label }}</span>
            </div>
            <ng-content></ng-content>
        </div>
    `,
})
export class BootstrapInput {
    @Input() cols: number[];
    @Input() label: string;
    @Input() hasLabel: boolean = true;

    /**
     * Given an array of columns in the following order:
     * [small, medium, large, x-large], this method will translate it
     * to the correct class.
     *
     * @example [12, 12, 4, 4] -> "col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"
     */
    calculateColumns(cols: number[]): string {
        let classString = `col-${cols[0]} col-sm-${cols[0]} col-md-${cols[1]} col-lg-${cols[2]} col-xl-${cols[3]}`;
        return classString;
    }
}

It will be used like this:

<div class="form-row">
  <bootstrap-input [cols]="[12, 12, 3, 3]" label="Name">
    <input class="form-control" />
  </bootstrap-input>

  <bootstrap-input [cols]="[12, 12, 3, 3]" label="Email">
    <input class="form-control" />
  </bootstrap-input>

  <bootstrap-input [cols]="[12, 12, 3, 3]" label="Phone">
    <input class="form-control" />
  </bootstrap-input>
</div>

Next, scale your browser to be big, and it won’t work.

Now, for some reasons, the HTML, or to be more specific, the styling of the group is not working properly. If I opened the Debugging Console and removed the wrapping bootstrap-input tag, it works properly. It’s worth mentioning that, this error only happens on > medium screen displays (large and extra-large).

Screen Shot

Demo on StackBlitz

What am I doing wrong here?