Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drop .text-justify class #29793

Merged
merged 7 commits into from
Dec 30, 2019
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion scss/_utilities.scss
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,7 @@ $utilities: map-merge(
responsive: true,
property: text-align,
class: text,
values: left right center justify
values: left right center
),
"color": (
property: color,
Expand Down
1 change: 1 addition & 0 deletions site/content/docs/4.3/migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ Changes to Reboot, typography, tables, and more.
- Simplified table styles (no more 2px border on `thead > th` elements) and tightened cell padding.
- Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
- `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267)
- Drop `.text-justify` class.
XhmikosR marked this conversation as resolved.
Show resolved Hide resolved

## Forms

Expand Down
12 changes: 5 additions & 7 deletions site/content/docs/4.3/utilities/text.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,7 @@ toc: true

## Text alignment

Easily realign text to components with text alignment classes.

{{< example >}}
<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>
{{< /example >}}

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
Easily realign text to components with text alignment classes. For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

{{< example >}}
<p class="text-left">Left aligned text on all viewport sizes.</p>
Expand All @@ -27,6 +21,10 @@ For left, right, and center alignment, responsive classes are available that use
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
{{< /example >}}

{{< callout info >}}
Notice we don't provide utility classes for justified text. While, aesthetically, justified text can look more appealing, it does make word-spacing more random and therefor harder to read.
MartijnCuppens marked this conversation as resolved.
Show resolved Hide resolved
{{< /callout >}}

## Text wrapping and overflow

Wrap text with a `.text-wrap` class.
Expand Down