<div class = "col-lg-6 my-3">
    <div class="card border-primary bg-primary mb-3">
        <div class="card-header text-white">Header</div>
        <div class="card-body text-white">
            <h5 class="card-title">Primary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
</div>

<div class = "col-lg-6 my-3">
    <div class="card border-secondary bg-secondary mb-3">
        <div class="card-header text-white">Header</div>
        <div class="card-body text-white">
            <h5 class="card-title">Secondary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
</div>

<div class = "col-lg-6 my-3">
    <div class="card border-success bg-success mb-3">
        <div class="card-header text-white">Header</div>
        <div class="card-body text-white">
            <h5 class="card-title">Success card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
</div>

<div class = "col-lg-6 my-3">
    <div class="card border-danger bg-danger mb-3">
        <div class="card-header text-white">Header</div>
        <div class="card-body text-white">
            <h5 class="card-title">Danger card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
</div>

<div class = "col-lg-6 my-3">
    <div class="card border-warning bg-warning mb-3">
        <div class="card-header text-white">Header</div>
        <div class="card-body text-white">
            <h5 class="card-title">Warning card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
</div>

<div class = "col-lg-6 my-3">
    <div class="card border-info bg-info mb-3">
        <div class="card-header text-white">Header</div>
        <div class="card-body text-white">
            <h5 class="card-title">Info card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
</div>

<div class = "col-lg-6 my-3">
    <div class="card  border-light bg-light  mb-3">
        <div class="card-header ">Header</div>
        <div class="card-body text-secondary">
            <h5 class="card-title">Light card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
</div>

<div class = "col-lg-6 my-3">
    <div class="card border-dark bg-dark mb-3">
        <div class="card-header text-white">Header</div>
        <div class="card-body text-white">
            <h5 class="card-title">Dark card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
</div>