Is it possible to justify text within the bootstrap framework?
HtmlCssTwitter BootstrapHtml Problem Overview
This might be a silly question but I'm certain I'm not the only one wondering.
I'm aware of the alignment classes:
<p class="text-center">Text Centered within the block element</p>
<p class="text-right">Text aligned to the right within the block element</p>
<p class="text-left">Text aligned to the left within the block element</p>
Is there a set of classes in Twitters Bootstrap Framework that justifies text?
e.g. <p class="text-justify">Sample Text Goes Here</p>
why does it appear that bootstrap do not incorporate a utility function such as text-align: justify
?
Html Solutions
Solution 1 - Html
In Bootstrap 3 and Bootstrap 4 you can use the following:
<p class="text-justify">Justified text.</p>
(Update) This feature removed from Bootstrap 5
> 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! ;)
Solution 2 - Html
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
.
Solution 3 - Html
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,
...
...
…
Solution 4 - Html
There is a class available for this in Bootstrap.
class = 'text-justify'
You can check out the text-alignment in Bootstrap documentation.