Text

A collection of useful text utility classes to style your content.


Text styles

Clique.UI offers various text utlities to style your text.

Class Description
.text-small Add this class to decrease the font size.
.text-large Add this class to increase the font size.
.text-bold Add this class to create bold text.
.text-uppercase Add this class to force uppercase text.
.text-lowercase Add this class to force lowercase text.
.text-capitalize Add this class to force capitalized text.
.text-muted Add this class to mute your text.
.text-primary Add this class for additional text information.
.text-success Add this class to indicate success.
.text-warning Add this class to indicate a warning.
.text-danger Add this class to indicate danger.
.text-contrast Add this class to make the text color readable on flat color areas or pictures. It's often white.

Text alignment

Add one of these useful classes to align your text.

Class Description
.text-left Aligns text to the left.
.text-left-small Aligns text to the left only on small devices.
.text-left-medium Aligns text to the left on medium and small devices.
.text-right Aligns text to the right.
.text-center Centers text horizontally.
.text-center-small Centers text horizontally only on small devices.
.text-center-medium Centers text horizontally on medium and small devices.
.text-justify Justifies text.

Usage

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .text-left
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .text-right
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .text-center
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .text-center-small
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .text-center-medium
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .text-justify
  • <div class="panel panel-box text-left">...</div>
    <div class="panel panel-box text-right">...</div>
    <div class="panel panel-box text-center">...</div>
    <div class="panel panel-box text-center-small">...</div>
    <div class="panel panel-box text-center-medium">...</div>
    <div class="panel panel-box text-justify">...</div>

Vertical alignment

Add one of these classes to vertically align text to an object.

Class Description
.text-top Aligns text to the top.
.text-middle Centers text vertically.
.text-bottom Aligns text to the bottom.

Usage

  • Lorem ipsum.
    Lorem ipsum.
    Lorem ipsum.
  • <div class="row">
    	<div class="col">
    		<img src=""> <span class="text-top">Lorem ipsum.</span>
    	</div>
    	<div class="col">
    		<img src=""> <span class="text-middle">Lorem ipsum.</span>
    	</div>
    	<div class="col">
    		<img src=""> <span class="text-bottom">Lorem ipsum.</span>
    	</div>
    </div>

Text wrapping

Add one of these useful classes to wrap your text.

Class Description
.text-truncate Prevents text from wrapping into multiple lines, truncating it instead.
.text-break Breaks strings if their length exceeds the width of their container.
.text-nowrap Prevents text from wrapping into multiple lines.

Usage

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elit .text-truncate
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elit .text-break
    Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac. .text-nowrap
  • <div class="row">
    	<div class="col">
    		<div class="panel panel-box text-truncate">
    			...
    		</div>
    	</div>
    	<div class="col">
    		<div class="panel panel-box text-break">
    			...
    		</div>
    	</div>
    	<div class="col">
    		<div class="panel panel-box text-nowrap">
    			...
    		</div>
    	</div>
    </div>