Home WebriQ App Bar
Tool Bar
Webriq logo

© WebriQ

Free & Open Source (MIT)
Notifications
View All

Helpers

Vertical Align

Align vertically center things by adding the class valign-wrapper to the container holding the items.

Align vertically center



.valign-wrapper
  h3.valign.center Align vertically center


<div class="valign-wrapper">
  <h3 class="valign center">Align vertically center</h3>
</div>

Text Align

For horizontally aligning content. We have .left-align, .right-align and .center-align

Left aligned
Right aligned
Center aligned


div
  h5.left-align Left aligned

div
  h5.right-align Right aligned

div
  h5.center-align Center aligned


<div>
    <h5 class="left-align">Left aligned</h5>
</div>
<div>
    <h5 class="right-align">Right aligned</h5>
</div>
<div>
    <h5 class="center-align">Center aligned</h5>
</div>

Truncate Text

For truncate text, add truncate class

Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum mauris sit amet nisl augue nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.


h5.truncate
  | Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum mauris sit amet nisl augue nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.


<h5 class="truncate">Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum mauris sit amet nisl augue nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.</h5>