Asymmetrik/ngx-starter

<h1 class="pb-3">Bootstrap Grid Examples</h1>
<h2>Stacked to horizontal</h2>
<h3>Standard</h3>
<div class="container">
    <div class="row">
        <div class="col-lg-8">col-lg-8</div>
        <div class="col-lg-4">col-lg-4</div>
    </div>
    <div class="row">
        <div class="col-lg">col-lg</div>
        <div class="col-lg">col-lg</div>
        <div class="col-lg">col-lg</div>
    </div>
</div>

<h3>Nav Aware</h3>
<div class="container">
    <div class="row">
        <div class="col-na-lg-8">col-na-lg-8</div>
        <div class="col-na-lg-4">col-na-lg-4</div>
    </div>
    <div class="row">
        <div class="col-na-lg">col-na-lg</div>
        <div class="col-na-lg">col-na-lg</div>
        <div class="col-na-lg">col-na-lg</div>
    </div>
</div>

<h2 class="pt-2">Mix and Match</h2>
<h3>Standard</h3>
<div class="container">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
        <div class="col-12 col-md-8">.col-12 .col-md-8</div>
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
        <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>

    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
        <div class="col-6">.col-6</div>
        <div class="col-6">.col-6</div>
    </div>
</div>

<h3>Nav Aware</h3>
<div class="container">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
        <div class="col-na-12 col-na-md-8">.col-na-12 .col-na-md-8</div>
        <div class="col-na-6 col-na-md-4">.col-na-6 .col-na-md-4</div>
    </div>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col-na-6 col-na-md-4">.col-na-6 .col-na-md-4</div>
        <div class="col-na-6 col-na-md-4">.col-na-6 .col-na-md-4</div>
        <div class="col-na-6 col-na-md-4">.col-na-6 .col-na-md-4</div>
    </div>

    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
        <div class="col-na-6">.col-na-6</div>
        <div class="col-na-6">.col-na-6</div>
    </div>
</div>