In **Bootstrap 5** there is no built-in class for this, but we can use the built-in **[Bootstrap Utility API][1]** to generate `text-justify` classes.
By default, Bootstrap 5 generates the following classes for text alignment: `text-start`, `text-center`, `text-end` (and their responsive versions):
We can generate the `text-justify` class by adding an additional value to the `text-align` utilities:
```scss
$utilities: map-merge(
$utilities,
(
"text-align": map-merge(
map-get($utilities, "text-align"),
(
values: map-merge(
map-get(map-get($utilities, "text-align"), "values"),
(justify: justify),
),
),
),
)
);
```
Full SCSS code:
```scss
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/utilities";
// extend `text-align` utility
$utilities: map-merge(
$utilities,
(
"text-align": map-merge(
map-get($utilities, "text-align"),
(
values: map-merge(
map-get(map-get($utilities, "text-align"), "values"),
(justify: justify),
),
),
),
)
);
// include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "bootstrap/scss/utilities/api";
```
**DEMO**:
https://stackblitz.com/edit/bootstrap-5-qjdfsx?file=src%2Fstyles.scss
CSS Output:
```css
.text-justify { text-align: justify !important; }
@media (min-width: 576px) {
.text-sm-justify { text-align: justify !important; }
}
@media (min-width: 768px) {
.text-md-justify { text-align: justify !important; }
}
@media (min-width: 992px) {
.text-lg-justify { text-align: justify !important; }
}
@media (min-width: 1200px) {
.text-xl-justify { text-align: justify !important; }
}
@media (min-width: 1400px) {
.text-xxl-justify { text-align: justify !important; }
}
```
[1]: https://getbootstrap.com/docs/5.0/utilities/api/
In Bootstrap 5, `text-alignment` classes are part of **Bootstrap utilities**, which can be extended using **Utilities API**.
By default, Bootstrap 5 generates the following classes: `text-start`, `text-center`, `text-end` (*their responsive classes are also available*).
We can generate the `text-justify` class by adding an additional value to the `text-align` utilities:
```scss
$utilities: map-merge(
$utilities,
(
"text-align": map-merge(
map-get($utilities, "text-align"),
(
values: map-merge(
map-get(map-get($utilities, "text-align"), "values"),
(justify: justify),
),
),
),
)
);
```
CSS Output:
```css
.text-justify {
text-align: justify !important;
}
@media (min-width: 576px) {
.text-sm-justify {
text-align: justify !important;
}
}
// .text-md-justify ...
// .text-lg-justify ...
@media (min-width: 1200px) {
.text-xl-justify {
text-align: justify !important;
}
}
```
Full SCSS code:
```scss
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/utilities";
// extend `text-align` utility
$utilities: map-merge(
$utilities,
(
"text-align": map-merge(
map-get($utilities, "text-align"),
(
values: map-merge(
map-get(map-get($utilities, "text-align"), "values"),
(justify: justify),
),
),
),
)
);
// include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "bootstrap/scss/utilities/api";
```
DEMO:
https://stackblitz.com/edit/bootstrap-5-qjdfsx?file=src%2Fstyles.scss
Further resources:
https://getbootstrap.com/docs/5.0/utilities/api/#using-the-api
https://getbootstrap.com/docs/5.0/utilities/api/#modify-utilities
