Is it possible to justify text within the bootstrap framework?

HtmlCssTwitter Bootstrap

Html 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>

Official documentation

(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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionscriptmonkeyView Question on Stackoverflow
Solution 1 - HtmlZoltanView Answer on Stackoverflow
Solution 2 - HtmlFlavio PaulinoView Answer on Stackoverflow
Solution 3 - Htmlchris FrisinaView Answer on Stackoverflow
Solution 4 - HtmlÇetinView Answer on Stackoverflow