Professional Documents
Culture Documents
Home
Documentation
Examples
Themes
Expo
Blog
v4.3
Search...
Getting started
Layout
Content
Components
Utilities
Borders
Clearfix
Close icon
Colors
Display
Embed
Flex
Float
Image replacement
Overflow
Position
Screen readers
Shadows
Sizing
Spacing
Stretched link
Text
Vertical align
Visibility
Extend
Migration
About
Text alignment
Word break
Text transform
Monospace
Reset color
Text decoration
Text
Documentation and examples for common text utilities to control alignment, wrapping, weight, and
more.
ads via CarbonGoJS is a fast and powerful JavaScript and TypeScript diagramming library.
Text alignment
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio
operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc
posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras
mattis iudicium purus sit amet fermentum.
Copy
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex
communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem
certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
For left, right, and center alignment, responsive classes are available that use the same viewport width
breakpoints as the grid system.
Copy
Copy
</div>
Copy
</div>
For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires
display: inline-block or display: block.
Copy
<div class="row">
</div>
</div>
</span>
Word break
Prevent long strings of text from breaking your components’ layout by using .text-break to set overflow-
wrap: break-word (and word-break: break-word for IE & Edge compatibility).
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
Copy
<p class="text-
break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p
>
Text transform
lowercased text.
UPPERCASED TEXT.
CapiTaliZed Text.
Copy
Note how .text-capitalize only changes the first letter of each word, leaving the case of any other letters
unaffected.
Font weight and italics
Bold text.
Italic text.
Copy
Monospace
This is in monospace
Copy
Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.
Copy
<p class="text-muted">
</p>
Text decoration
Non-underlined link
Copy