Bootstrap Contents / color

<div class="container">

        <h1 class="display-1 text-center">Background Color</h1>

        <br>

        <div class="p-3 mb-2 bg-primary text-white">bg-primary</div>

        <div class="p-3 mb-2 bg-secondary text-white">bg-secondary</div>

        <div class="p-3 mb-2 bg-success text-white">bg-success</div>

        <div class="p-3 mb-2 bg-danger text-white">bg-danger</div>

        <div class="p-3 mb-2 bg-warning text-dark">bg-warning</div>

        <div class="p-3 mb-2 bg-info text-white">bg-info</div>

        <div class="p-3 mb-2 bg-light text-dark">bg-light</div>

        <div class="p-3 mb-2 bg-dark text-white">bg-dark</div>

        <div class="p-3 mb-2 bg-white text-dark">bg-white</div>

        <div class="p-3 mb-2 bg-transparent text-dark">bg-transparent</div>

</div>

 

 <div class="container">

        <h1 class="display-1 text-center">Text Color</h1>

        <br>

        <p class="text-primary">text-primary</p>

        <p class="text-secondary">text-secondary</p>

        <p class="text-success">text-success</p>

        <p class="text-danger">text-danger</p>

        <p class="text-warning">text-warning</p>

        <p class="text-info">text-info</p>

        <p class="text-light bg-dark">text-light</p>

        <p class="text-dark">text-dark</p>

        <p class="text-muted">text-muted</p>

        <p class="text-white bg-dark">text-white</p>

        <p class="text-black-50">text-black-50</p>

        <p class="text-white-50 bg-dark">text-white-50</p>

    </div>