bs-grid provides the Bootstrap grid container; bsRow marks a row of columns; and width directives such as [md], [lg], [sm], [xxs], or the auto-width col attribute set the column span at the corresponding breakpoint.
<bs-grid>
<div bsRow>
<div [md]="6">Left column</div>
<div [md]="6">Right column</div>
</div>
</bs-grid>
import { Component } from '@angular/core';
import {
BsGridComponent,
BsGridRowDirective,
BsGridColumnDirective,
} from '@mintplayer/ng-bootstrap/grid';
@Component({
selector: 'my-grid-demo',
templateUrl: './my-grid-demo.component.html',
imports: [
BsGridComponent,
BsGridRowDirective,
BsGridColumnDirective,
],
})
export class MyGridDemoComponent {}
<!-- col auto-fits — columns share width equally inside the row. -->
<bs-grid>
<div bsRow>
<div col>Hello</div>
<div col>World</div>
</div>
</bs-grid>
<!-- [sm]="N" sets the column span at the small breakpoint and up. -->
<bs-grid>
<div bsRow>
<div [sm]="8">Hello</div>
<div [sm]="4">World</div>
</div>
</bs-grid>
<!-- [xxs]="N" sets the column span from the smallest breakpoint upward. -->
<bs-grid>
<div bsRow>
<div [xxs]="8">Hello</div>
<div [xxs]="4">World</div>
</div>
</bs-grid>