Home Get Started Examples

Themes

displayn/a positionn/a z-indexn/a font-size scalingn/a breakpointsn/a

Class List

  • .primary
  • .info
  • .caution
  • .danger
  • .light
  • .dark

Description

The theme classes Sandbox provides are very simple, and easy to expand or create. The only color properties they set are background-color, border-color and color.

These theme classes can be used pretty much anywhere in order to change the visual style of the element they are used on.

Example

tag tag tag tag tag tag

Lorem ipsum

mm/dd/yyyy

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis tempora veritatis excepturi.

<span class="tag h4 primary">tag</span>
<span class="tag h4 info">tag</span>
<span class="tag h4 caution">tag</span>
<span class="tag h4 danger">tag</span>
<span class="tag h4 light">tag</span>
<span class="tag h4 dark">tag</span>
<div class="progress my-half">
    <div class="progress-bar primary" style="width: 40%;"></div>
</div>
<div class="progress mb-half">
    <div class="progress-bar info" style="width: 50%;"></div>
</div>
<div class="progress mb-half">
    <div class="progress-bar caution" style="width: 60%;"></div>
</div>
<div class="progress mb-half">
    <div class="progress-bar danger" style="width: 70%;"></div>
</div>
<div class="progress mb-half">
    <div class="progress-bar light" style="width: 80%;"></div>
</div>
<div class="progress mb-half">
    <div class="progress-bar dark" style="width: 90%;"></div>
</div>
<div class="card">
    <div class="card-header light">
        <h3><!-- your content --></h3>
    </div>
    <div class="card-body">
        <h5 class="text-muted">mm/dd/yyyy</h5>
        <p><!-- your content --></p>
    </div>
</div>
previous next