1.4. Responsive Alignment

Helper classes for adjusting alignment on different breakpoints.

Example

Left

.text-left-xs
.text-left-sm
.text-left-md
.text-left-lg

Center

.text-center-xs
.text-center-sm
.text-center-md
.text-center-lg

Right

.text-right-xs
.text-right-sm
.text-right-md
.text-right-lg
<div class="row">
    <div class="col-sm-4">
        <h4>Left</h4>
        <div class="text-left-xs kss__example-box kss__example-box--xs"><code>.text-left-xs</code></div>
        <div class="text-left-sm kss__example-box kss__example-box--sm"><code>.text-left-sm</code></div>
        <div class="text-left-md kss__example-box kss__example-box--md"><code>.text-left-md</code></div>
        <div class="text-left-lg kss__example-box kss__example-box--lg"><code>.text-left-lg</code></div>
    </div>
    <div class="col-sm-4">
        <h4>Center</h4>
        <div class="text-center-xs kss__example-box kss__example-box--xs"><code>.text-center-xs</code></div>
        <div class="text-center-sm kss__example-box kss__example-box--sm"><code>.text-center-sm</code></div>
        <div class="text-center-md kss__example-box kss__example-box--md"><code>.text-center-md</code></div>
        <div class="text-center-lg kss__example-box kss__example-box--lg"><code>.text-center-lg</code></div>
    </div>
    <div class="col-sm-4">
        <h4>Right</h4>
        <div class="text-right-xs kss__example-box kss__example-box--xs"><code>.text-right-xs</code></div>
        <div class="text-right-sm kss__example-box kss__example-box--sm"><code>.text-right-sm</code></div>
        <div class="text-right-md kss__example-box kss__example-box--md"><code>.text-right-md</code></div>
        <div class="text-right-lg kss__example-box kss__example-box--lg"><code>.text-right-lg</code></div>
    </div>
</div>