Utility classes

Text highlight

Highlight a part of a text.

  • Default
  • Inverse
This is a text and this part should be highlighted.
This is a text and <span class="lui-texthighlight">this part</span> should be highlighted.
This is a text and this part should be highlighted.
This is a text and <span class="lui-texthighlight">this part</span> should be highlighted.

Text classes

Set the foreground color of an element.

  • Default
  • Inverse
lui-text-default
lui-text-info
lui-text-danger
lui-text-warning
lui-text-success
<div class="lui-text-default">
  lui-text-default
</div>
<div class="lui-text-info">
  lui-text-info
</div>
<div class="lui-text-danger">
  lui-text-danger
</div>
<div class="lui-text-warning">
  lui-text-warning
</div>
<div class="lui-text-success">
  lui-text-success
</div>
lui-text-inverse
lui-text-info
lui-text-danger
lui-text-warning
lui-text-success
<div class="lui-text-inverse">
  lui-text-inverse
</div>
<div class="lui-text-info">
  lui-text-info
</div>
<div class="lui-text-danger">
  lui-text-danger
</div>
<div class="lui-text-warning">
  lui-text-warning
</div>
<div class="lui-text-success">
  lui-text-success
</div>

Background classes

Set the background and foreground colors of an element.

lui-bg-default
lui-bg-alt
lui-bg-inverse
lui-bg-inverse-alt
lui-bg-info
lui-bg-danger
lui-bg-warning
lui-bg-success
<div class="lui-bg-default" style="padding: 5px;">
  lui-bg-default
</div>
<div class="lui-bg-alt" style="padding: 5px;">
  lui-bg-alt
</div>
<div class="lui-bg-inverse" style="padding: 5px;">
  lui-bg-inverse
</div>
<div class="lui-bg-inverse-alt" style="padding: 5px;">
  lui-bg-inverse-alt
</div>
<div class="lui-bg-info" style="padding: 5px;">
  lui-bg-info
</div>
<div class="lui-bg-danger" style="padding: 5px;">
  lui-bg-danger
</div>
<div class="lui-bg-warning" style="padding: 5px;">
  lui-bg-warning
</div>
<div class="lui-bg-success" style="padding: 5px;">
  lui-bg-success
</div>