Utilities

Width Classes

.width-0 {
    width: 0%;
}

.width-25 {
    width: 25%;
}

.width-50 {
    width: 50%;
}

.width-75 {
    width: 75%;
}

.width-100 {
    width: 100%;
}

.width-auto {
    width: auto;
}

Example Usage

<div style="background: #6ecbcc; height: 50px;">
    <div class="width-50" style="height: 50px; background: #44b6ff;">
        <div class="width-50" style="background: #000066; height: 50px;"></div>
    </div>
</div>

Floating

Toggle floats on any element, across any breakpoint, using our responsive float utilities.

Classes

Toggle float with html classes. Make sure after you use float, to clear with the .clear class.

<div class="pull-right">Float Right Text</div>
<div class="pull-left">Float Left Text</div>
<div class="clear"></div>
<div>None Float Text</div>

Mixins

float classes are also available as mixins:

.example {
    width: 20px;
    height: 20px;
    @include pull-right;
}

Display Classes

The following display classes are predefined.

SASS

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

.d-block {
    display: block;
}

Text Utility Classes

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-upper {
    text-transform: uppercase;
}

.text-light {
    font-weight: lighter;
}

.text-bold {
    font-weight: bold;
}