mt-5
mb-5
<h1>Colors</h1>

<div class="row"> <div class="col-md-4"> <div class="p-3 mb-3 bg-primary text-white">Primary</div> </div> <div class="col-md-4"> <div class="p-3 mb-3 bg-secondary text-white">Secondary</div> </div> <div class="col-md-4"> <div class="p-3 mb-3 bg-success text-white">Success</div> </div> <div class="col-md-4"> <div class="p-3 mb-3 bg-danger text-white">Danger</div> </div> <div class="col-md-4"> <div class="p-3 mb-3 bg-warning text-dark">Warning</div> </div> <div class="col-md-4"> <div class="p-3 mb-3 bg-info text-dark">Info</div> </div> <div class="col-md-4"> <div class="p-3 mb-3 bg-light text-dark">Light</div> </div> <div class="col-md-4"> <div class="p-3 mb-3 bg-dark text-white">Dark</div> </div> </div>
mb-5
<h1>Custom Colors</h1>

<p class="lead">The Atomik theme provides custom colors as well. Apply these to elements in HTML with <code>text-{class}</code> or <code>bg-{class}</code>, or use them from within the blocks that support them.</p>

<div class="row"> <div class="col-md-4"> <div class="p-3 mb-3 text-white bg-light-accent">Light Accent</div> </div> <div class="col-md-4"> <div class="p-3 mb-3 bg-accent">Accent</div> </div> <div class="col-md-4"> <div class="p-3 mb-3 text-white bg-dark-accent">Dark Accent</div> </div> </div>