Search
Find
Colors
Change the color of the text or background
Display
Customize how the content is displayed in your website
Float
Align elements in your website
Sizing
Modify the width or the height of an element
Spacing
Customize the padding and the margin of an element
Text helpers
Basic text helpers
Miscellanea helpers
A collection of unclassified helpers
Text helpers
Basic text helpers
Added in v3.1.0
Text alignment
Use
siimple--text-justify to justify text, siimple--text-left to align text to the left, siimple--text-right to align text to the right and siimple--text-center to center text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Left aligned text
Right aligned text
Center aligned text
<div class="siimple-paragraph siimple--text-justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
<div class="siimple-paragraph siimple--text-left">
Left aligned text
</div>
<div class="siimple-paragraph siimple--text-right">
Right aligned text
</div>
<div class="siimple-paragraph siimple--text-center">
Center aligned text
</div>
Text transform
Apply simple text transformations.
Uppercase text!
Lowercase text!
Capitalized text!
<div class="siimple-paragraph siimple--text-uppercase">Uppercase text!</div> <div class="siimple-paragraph siimple--text-lowercase">Lowercase text!</div> <div class="siimple-paragraph siimple--text-capitalize">Capitalized text!</div>
Text size, weight and italic
Transform the text size and weight.
Bold text
Italic text
Normal text
Small text
<div class="siimple-paragraph siimple--text-bold">Bold text</div> <div class="siimple-paragraph siimple--text-italic">Italic text</div> <div class="siimple-paragraph siimple--text-normal">Normal text</div> <div class="siimple-paragraph siimple--text-small">Small text</div>
Found a mistake or want to help improve this documentation?
Suggest changes.