Text utilities
Halfmoon comes with utility classes which can be used to set the text alignment, wrapping, weight, size, and more.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
Text alignment #
Text can be justified using the class .text-justify.
The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare. Sleeping in his car was never the plan but sometimes things don't work out as planned. This had been his life for the last three months and he was just beginning to get used to it. He didn't actually enjoy it, but he had accepted it and come to terms with it. Or at least he thought he had. All that changed when he put the key into the ignition, turned it and the engine didn't make a sound.
<!-- Justified text -->
<p class="text-justify">
The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare. Sleeping in his car was never the plan but sometimes things don't work out as planned. This had been his life for the last three months and he was just beginning to get used to it. He didn't actually enjoy it, but he had accepted it and come to terms with it. Or at least he thought he had. All that changed when he put the key into the ignition, turned it and the engine didn't make a sound.
</p>Responsive classes are available for left, center, or right alignment:
- text-left/text-{breakpoint}-left
- text-center/text-{breakpoint}-center
- text-right/text-{breakpoint}-right
The {breakpoint} can be sm, md, lg, or xl. If the breakpoint is not provided, the element will be affected on all screen sizes (including extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.
Text aligned to left on all screen sizes
Text aligned to center on all screen sizes
Text aligned to right on all screen sizes
Text aligned to left on small screens and up
Text aligned to center on medium screens and up
Text aligned to right on large screens and up
Text aligned to right on extra large screens and up
<!-- Text aligned to left -->
<p class="text-left">
Text aligned to left on all screen sizes
</p>
<!-- Text aligned to center -->
<p class="text-center">
Text aligned to center on all screen sizes
</p>
<!-- Text aligned to right -->
<p class="text-right">
Text aligned to right on all screen sizes
</p>
<!-- Text aligned to left on small screens and up (width > 576px) -->
<p class="text-sm-left">
Text aligned to left on small screens and up
</p>
<!-- Text aligned to left on medium screens and up (width > 768px) -->
<p class="text-md-center">
Text aligned to center on medium screens and up
</p>
<!-- Text aligned to left on large screens and up (width > 992px) -->
<p class="text-lg-right">
Text aligned to right on large screens and up
</p>
<!-- Text aligned to right on extra large screens and up (width > 1200px) -->
<p class="text-xl-right">
Text aligned to right on extra large screens and up
</p>Text wrapping and overflow #
The following classes can be used to control the wrapping and overflow of text:
- The .text-wrap class wraps text.
- The .text-nowrap class prevents the text from wrapping.
- The .text-truncate class truncates the text with an ellipsis. It should be noted that this only works on elements with the display: inline-block or display: block property.
This text should wrap.
This text should overflow.
This text should be truncated.
<!-- Text with wrapping -->
<div class="text-wrap w-150"> <!-- w-150 = width: 15rem (150px) -->
This text should wrap.
</div>
<!-- Text without wrapping -->
<div class="text-nowrap w-150"> <!-- w-150 = width: 15rem (150px) -->
This text should overflow.
</div>
<!-- Text truncated -->
<span class="text-truncate d-inline-block w-150"> <!-- d-inline-block= display: inline-block, w-150 = width: 15rem (150px) -->
This text should be truncated.
</span>Please note that the boxes above are given margin, padding, and also a border using utility classes. This is not shown in the code for the sake of conciseness.
Word break #
The class .text-break sets the word-wrap: break-word to the text. This can be used to prevent very long strings from breaking the layout.
When you reply "Hmmmmmmmmmmmmmmmmmmmmmmm" to a stupid message.
<!-- Word break -->
<div class="text-break w-200"> <!-- w-200 = width: 20rem (200px) -->
When you reply "Hmmmmmmmmmmmmmmmmmmmmmmm" to a stupid message.
</div>Text transform #
The capitalization of text can be set using the following classes:
- The .text-lowercase class lowers the capitalization of all the letters.
- The .text-uppercase class capitalizes all the letters.
- The .text-capitalize class capitalizes only the first letter of each word.
LOWERCASED TEXT
uppercased text
capitalized text
<!-- Text lowercase -->
<p class="text-lowercase">
LOWERCASED TEXT
</p>
<!-- Text uppercase -->
<p class="text-uppercase">
uppercased text
</p>
<!-- Text capitalized -->
<p class="text-capitalize">
capitalized text
</p>Font weight and italics #
The table below shows the classes which can be used to set the font-weight and font-style properties of text.
| Class | Description |
|---|---|
| .font-weight-light | Sets the font-weight: 300 property |
| .font-weight-lighter | Sets the font-weight: lighter property |
| .font-weight-normal | Sets the font-weight: 400 property |
| .font-weight-medium | Sets the font-weight: 500 property |
| .font-weight-semi-bold | Sets the font-weight: 600 property |
| .font-weight-bold | Sets the font-weight: 700 property |
| .font-weight-bolder | Sets the font-weight: bolder property |
| .font-italic | Sets the font-style: italic property |
Please note that for a font to render properly in a specific weight, that weight must be available for that font. You can see some of the above classes in action in the example below:
This text will be normal.
This text will be bold.
This text will be italic.
<!-- Normal font weight -->
<p class="font-weight-normal">
This text will be normal.
</p>
<!-- Bold font weight -->
<p class="font-weight-bold">
This text will be bold.
</p>
<!-- Italic font style -->
<p class="font-italic">
This text will be italic.
</p>Font size #
The table below shows the classes which can be used to set the font-size property of text.
| Class | Description |
|---|---|
| .font-size-12 | Sets the font-size: 1.2rem (12px) property |
| .font-size-14 | Sets the font-size: 1.4rem (14px) property |
| .font-size-16 | Sets the font-size: 1.6rem (16px) property |
| .font-size-18 | Sets the font-size: 1.8rem (18px) property |
| .font-size-20 | Sets the font-size: 2.0rem (20px) property |
| .font-size-22 | Sets the font-size: 2.2rem (22px) property |
| .font-size-24 | Sets the font-size: 2.4rem (24px) property |
By default, the body text in Halfmoon is set to 14px. You can see the above classes in action in the example below:
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
<!-- font-size: 1.2rem (12px) -->
<p class="font-size-12">
The quick brown fox jumps over the lazy dog
</p>
<!-- font-size: 1.4rem (14px) -->
<p class="font-size-14">
The quick brown fox jumps over the lazy dog
</p>
<!-- font-size: 1.6rem (16px) -->
<p class="font-size-16">
The quick brown fox jumps over the lazy dog
</p>
<!-- font-size: 1.8rem (18px) -->
<p class="font-size-18">
The quick brown fox jumps over the lazy dog
</p>
<!-- font-size: 2.0rem (20px) -->
<p class="font-size-20">
The quick brown fox jumps over the lazy dog
</p>
<!-- font-size: 2.2rem (22px) -->
<p class="font-size-22">
The quick brown fox jumps over the lazy dog
</p>
<!-- font-size: 2.4rem (24px) -->
<p class="font-size-24">
The quick brown fox jumps over the lazy dog
</p>Monospace #
The .text-monospace class shifts the text to the monospace font stack.
This text will be monospace
<!-- Monospace font stack -->
<p class="text-monospace">
This text will be monospace
</p>Text decoration #
The text-decoration property can be set using the following classes:
- The .text-decoration-none class sets it to none.
- The .text-decoration-underline class sets it to underline.
No text decoration
Underlined
<!-- No text decoration -->
<p class="text-decoration-none">
No text decoration
</p>
<!-- Text decoration underline -->
<p class="text-decoration-underline">
Underlined
</p>Reset color #
The .text-reset class makes the text inherit the color of its parent. This can be used on links for instance.
Muted text a nice link.
<!-- Text reset -->
<p class="text-muted">
Muted text a <a href="#" class="text-reset text-decoration-underline">nice link</a>.
</p>Extra letter spacing #
The class .text-extra-letter-spacing adds extra letter spacing to all the text. While the difference is very subtle, this can often improve the readability of the text.
It was going to rain
The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare. Sleeping in his car was never the plan but sometimes things don't work out as planned. This had been his life for the last three months and he was just beginning to get used to it. He didn't actually enjoy it, but he had accepted it and come to terms with it. Or at least he thought he had. All that changed when he put the key into the ignition, turned it and the engine didn't make a sound.
<!-- Extra letter spacing -->
<div class="content text-extra-letter-spacing">
<h2 class="content-title">It was going to rain</h2>
<p>
The weather forecast didn't say that, but the steel plate in his hip did. He had learned over the years to trust his hip over the weatherman. It was going to rain, so he better get outside and prepare. Sleeping in his car was never the plan but sometimes things don't work out as planned. This had been his life for the last three months and he was just beginning to get used to it. He didn't actually enjoy it, but he had accepted it and come to terms with it. Or at least he thought he had. All that changed when he put the key into the ignition, turned it and the engine didn't make a sound.
</p>
</div>Anti-aliasing # Since v1.1.0+
Anti-aliasing is a technique that can be used for making text smoother (if the browser supports it). It works best on light fonts on dark backgrounds. Otherwise, there is a slight loss of readability, especially if the font size is small. In Halfmoon, anti-aliasing is applied by default to all the light text in dark mode. This means that things like contextual buttons and alerts are left out (in dark mode). In light mode, anti-aliasing is not applied anywhere.
It is often useful to control the anti-aliasing using utility classes. The following classes are available for this purpose:
- .text-smoothing-auto/.text-smoothing-auto-{lm|dm} removes any anti-aliasing, by resetting the filter to default.
- .text-smoothing-antialiased/.text-smoothing-antialiased-{lm|dm} sets anti-aliasing to the text.
The *-lm classes work only in light mode, while the *-dm classes work only in dark mode. Without these extensions, the classes obviously apply to both modes.
This is anti-aliased in light mode
This is not anti-aliased in dark mode
<!-- Anti-aliased in light mode -->
<p class="text-smoothing-antialiased-lm font-size-16"> <!-- font-size-16 = font-size: 1.6rem (16px) -->
This is anti-aliased in light mode
</p>
<!-- Not anti-aliased in dark mode -->
<p class="text-smoothing-auto-dm font-size-16"> <!-- font-size-16 = font-size: 1.6rem (16px) -->
This is <strong>not</strong> anti-aliased in dark mode
</p>It is worth repeating that anti-aliasing is applied by default to most things in dark mode. Therefore, the two scenarios in the above example are the most common use cases for these utility classes.
Up next:
Border utilities
Help us grow
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
Gold sponsor
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
Sponsors
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor image placeholder
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
Backers
The following people have generously decided to support Halfmoon.
- Ethan Fann
- Julia Koblitz
- Benjamin Listwon
- Sean Lindsay
- Daan
Become a backer on Patreon .
Subscribe for updates
- We will notify you when the framework gets a substantial update. No spam or marketing.
- You can also follow us on Twitter and stay updated that way.
