<div class='bg-primary p-3'>primary</div>
    <div class='bg-secondary'>secondary</div>
    <div class='bg-trimary'>trimary</div>
    <div class='bg-ok'>ok</div>
    <div class='bg-info'>info</div>
    <div class='bg-warn'>warn</div>
    <div class='bg-risk'>risk</div>
    <div class='bg-dark'>dark</div>
    <div class='bg-light'>light</div>
    <div class='bg-white'>white</div>
    <div class='text-white bg-black'>black</div>
    <div class='bg-transparent'>transparent</div>

        <div class='text-primary p-3'>primary</div>
        <div class='text-secondary'>secondary</div>
        <div class='text-trimary'>trimary</div>
        <div class='text-ok'>ok</div>
        <div class='text-info'>info</div>
        <div class='text-warn'>warn</div>
        <div class='text-risk'>risk</div>
        <div class='text-dark'>dark</div>
        <div class='bg-dark text-light'>light</div>
        <div class='text-white'>white</div>
        <div class='text-black'>black</div>
        <div class='text-transparent'>transparent</div>