Text
Learn how to change the text size, alignment, and font-weight.
Typeface
We use the Roboto font family by Google. Add this line to the <head> of your widgets to use this font:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
Font Size
The base font size is 16px. It's applied by default.
Note, that if an element doesn't have a class it inherits all font properties from its parent. This means that you can add a class once, and it will be applied to all child elements (if they don't have a class that overrides the parent class).
Use these classes to change the font size:
| CSS Class | Font Size / Line Height |
|---|---|
.text-sm
|
12px / 16px |
.text-md
|
14px / 20px |
.text-lg
|
16px / 24px |
.h3
|
20px / 28px |
.h2
|
24px / 32px |
.h1
|
28px / 36px |
.h0
|
36px / 44px |
.title2
|
48px / 56px |
.title1
|
60px / 68px |
Font Weight, Decoration, and Alignment
| CSS Class | Result |
|---|---|
.text-bold
|
Bold text |
.text-normal
|
Normal text (default) |
.text-underline
|
Underlined text |
.text-left
|
Left-aligned text (default) |
.text-center
|
Center-aligned text |
.text-right
|
Right-aligned text |
You can also use responsive alignment.
Example: text with .text-center.text-md-left.text-lg-right.text-xl-center classes will be center-aligned on screens up to 679px, left-aligned on screens up to 879px, right-aligned on screens up to 1179px, and center-aligned on larger screens.
Text Wrapping & Truncation
| CSS Class | Result |
|---|---|
.text-wrap
|
Very long text that wraps words (default behaviour) |
.text-wrap-all
|
Very long text that wraps letters |
.text-nowrap
|
Very long text that don't wrap |
.text-truncate
|
Text that truncates if there's not enough space. Please note that it must be placed in a container that has an overflow: hidden. You can add the .overflow-hidden class to its parent container. |
Lists & Paragraphs
By default text paragraphs (<p>) don't have bottom margins. You can add them manually by using .mb-8 or similar classes.
| CSS Class | Effect | Result |
|---|---|---|
ul.list-unstyled
|
Removes bullet points from the list |
|
ul.list-inline
|
Produces inline list (implicitly makes a flex layout) |
|
Links
By default text paragraphs (<p>) don't have bottom margins. You can add them manually by using .mb-8 or similar classes.
| CSS Class | Effect | Result |
|---|---|---|
a.link-unstyled
|
Removes link styling completely |
Unstyled link |