bootstrap5 - a

by xpusostomos

HTML

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
         <div class="grid">
        <div class="row gy-5">
            <div class="col-md-2">
                Select:
            </div>
            <div class="col-md-4">
                <label class="form-check-label" for="mapped">
                    <input id="mapped" class="form-check-input" type="checkbox" [(ngModel)]="mapped"
                           (change)="change(true)"/>
                    Mapped</label>
            </div>
            <div class="col-md-5">
                <label class="form-check-label" for="unmapped">
                    <input id="unmapped" class="form-check-input" type="checkbox" [(ngModel)]="unmapped"
                           (change)="change(true)"/>
                    Unmapped</label>
            </div>
        </div>
        <div class="row gy-5">
            <div class="col-md-2">
                Show:
            </div>
            <div class="col-md-4">
                <label class="form-check-label" for="summary">
                    <input id="summary" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="false"
                           (change)="change(false)"/>
                    Summary</label>
            </div>
            <div class="col-md-5">
                <label class="form-check-label" for="detail">
                    <input id="detail" class="form-check-input" type="radio" [(ngModel)]="detail" [value]="true"
                           (change)="change(false)"/>
                    Detail</label>
            </div>
        </div>
 ...