Helpers

Left aligned text

Center aligned text

Right aligned text

Justified text

No wrap text

Lowercased text

Uppercased text

Capitalized text

Bold text

Italic text

This text gets truncated

<p class="text-left">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-right">Right aligned text</p>
<p class="text-justify">Justified text</p>
<p class="nowrap">No wrap text</p>

<p class="lowercase">Lowercased text</p>
<p class="uppercase">Uppercased text</p>
<p class="capitalize">Capitalized text</p>

<p class="bold">Bold text</p>
<p class="italic">Italic text</p>

<p style="max-width: 6.25rem;" class="truncate" title="This text gets truncated">This text gets truncated</p>

Alignment

Use .left and .right classes to float content. Wrap floated elements in a .clearfix.

.center class sets margin-left and margin-right to auto. .block class sets display to block

Float left
Float right
center block
<div class="clearfix">
  <div class="left bg-light">Float left</div>
  <div class="right bg-light">Float right</div>
</div>

<div style="width: 6.25rem;" class="center block bg-light">center block</div>

Colors

Add .bg-dark class to set text color to white on dark backgrounds. Use .bg-light class to apply a light background and to highlight content. Colors can be easily added or removed by editing the colors variable in variables.styl file.

This is a primary text

This is a secondary text

This is a success text

This is a error text

This has primary background

This has secondary background

This has success background

This has error background

This has faded background

<p class="text-primary">This is a primary text</p>
<p class="text-secondary">This is a secondary text</p>
<p class="text-success">This is a success text</p>
<p class="text-error">This is a error text</p>

<p class="bg-primary bg-dark size-medium">This has primary background</p>
<p class="bg-secondary bg-dark size-medium">This has secondary background</p>
<p class="bg-success bg-dark size-medium">This has success background</p>
<p class="bg-error bg-dark size-medium">This has error background</p>

<p class="bg-light size-medium">This has faded background</p>

Sizes

These classes also add padding and are used in sizing input and button elements. They can be used with .bg-* classes to give alerts or notices like appearance.

small content

medium content

large content

<p class="size-small bg-light">small content</p>
<p class="size-medium bg-light">medium content</p>
<p class="size-large bg-light">large content</p>

Hidden content

Add hidden attribute to hide content. You can also use responsive utilities .hidden-*-* to hide content.

This content is visible to screen readers only

<p hidden>This content is hidden</p>
<p class="invisible">This content is invisible</p>
<p class="sr-only">This content is visible to screen readers only</p>