CODEWITHSUNDEEP
htmlangularbootstrap-4
Faysal Ovi
Faysal Ovi

Reputation: 35

Bootstrap 4 full screen layout with Angular10

I want to use the full width of the browser.enter image description here

<div class="row">
            <div class="col-3">
                <product-filter [category]="category"></product-filter>
            </div>
    
            <div class="col-9">
                <div class="row">
                    <ng-container *ngFor="let p of filteredProducts; let i = index">
                        <div class="col">
                            <product-card [product]="p" [shopping-cart]="cart"></product-card>
                            <div *ngIf="(i + 1) % 2 === 0" class="row row-cols-2"></div>
                        </div>
                    </ng-container>
                </div>
            </div>
        </div>

Upvotes: 2

Views: 380

Answers (1)

Filip Huhta
Filip Huhta

Reputation: 2388

Add container-fluid

Boostrap Containers

.container-fluid for a full width container, spanning the entire width of the viewport.

<div class="row container-fluid">
            <div class="col-3">
                <product-filter [category]="category"></product-filter>
            </div>
    
            <div class="col-9">
                <div class="row">
                    <ng-container *ngFor="let p of filteredProducts; let i = index">
                        <div class="col">
                            <product-card [product]="p" [shopping-cart]="cart"></product-card>
                            <div *ngIf="(i + 1) % 2 === 0" class="row row-cols-2"></div>
                        </div>
                    </ng-container>
                </div>
            </div>
        </div>

Upvotes: 1

Related Questions