I have started to learn angular with asp.net and when trying to create cards to show some items I get the box with width 100%
.html:
<div class="row">
    <div class="card">
        <img class="propImage" src="assets/images/default_house.png">
        <div class="card-body p-1">
            <h1>{{ Property.Name }}</h1>
            <h2>{{ Property.Type }}</h2>
            <h3>{{ Property.Price }}</h3>
        </div>
    </div>
    <div class="card">
        <img class="propImage" src="assets/images/default_house.png">
        <div class="card-body p-1">
            <h1>{{ Property2.Name }}</h1>
            <h2>{{ Property2.Type }}</h2>
            <h3>{{ Property2.Price }}</h3>
        </div>
    </div>
</div>
and the componenemts:
import { Component } from '@angular/core';
@Component({
    selector: 'app-property-card',
    //template: '<h1>This is my card!</h1>',
    templateUrl: 'property-card.component.html',
    //styles: ['h1 {font-weight: normal;}']
    styleUrls: ['property-card.component.css']
})
export class PropertycardComponent
{
    Property: any = {
        "id":1,
        "Name": "Rami Wahdan",
        "Type":"House",
        "Price": 120000
    }
    Property2: any = {
        "id":1,
        "Name": "Fatima Habib",
        "Type":"House",
        "Price": 150000
    }
}
and here is a reference for the bootstrap:
{
  "name": "my-first-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/forms": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "bootstrap": "^5.3.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
},