Is it possible to justify text within the bootstrap framework?
You can add to your main.css
, custom.css
, or whichever *.css
file you have made, or to the top of bootstrap.css
file directly:
.text-justify {
text-align: justify;
}
If you add this to the bootstrap.css
file direcetly, as of v3.0.0, it would go from this:
/*!
* Bootstrap v3.0.0
*
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by @mdo and @fat.
*/
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
article,
aside,
details,
...
...
…
to
/*!
* Bootstrap v3.0.0
*
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by @mdo and @fat.
*/
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
.text-justify {
text-align: justify;
}
article,
aside,
details,
...
...
…
No. But you can add a new class on bootstrap.css
.text-justify {
text-align: justify;
}
Update
Previous versions of bootstrap was not supporting text-justify
.
But bootstrap 3 has added a class text-justify
.
In Bootstrap 3 and Bootstrap 4 you can use the following:
<p class="text-justify">Justified text.</p>
Official documentation
(Update) This feature removed from Bootstrap 5
- Commit
- Official document and recommendation
Note that we don't provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.
Based on the official UX suggestion: don't use justified text! ;)