📪Text Align

Text Alignment Classes

.text-right

Aligns the text to the right.

CSS equivalent: text-align: right;

Example usage:

<div class="text-right">This text is aligned to the right.</div>

.text-center

Aligns the text to the center.

CSS equivalent: text-align: center;

Example usage:

<div class="text-center">This text is aligned to the center.</div>

.text-left

Aligns the text to the left.

CSS equivalent: text-align: left;

Example usage:

<div class="text-left">This text is aligned to the left.</div>

Text Justification Classes

.text-justify-auto

Sets the text justification to auto.

CSS equivalent: text-align: justify;

Example

usage:

<div class="text-justify-auto">
  <p>This text is justified with the auto justification mode.</p>
</div>

.text-justify-inter-word

Sets the text justification to inter-word.

CSS equivalent:

.text-justify-inter-word {
  text-align: justify;
  text-justify: inter-word;
}

Example usage:

<div class="text-justify-inter-word">
  <p>This text is justified with the inter-word justification mode.</p>
</div>

.text-justify-inter-ideograph

Sets the text justification to inter-ideograph.

CSS equivalent:

.text-justify-inter-ideograph {
  text-align: justify;
  text-justify: inter-ideograph;
}

Example usage:

<div class="text-justify-inter-ideograph">
  <p>This text is justified with the inter-ideograph justification mode.</p>
</div>

.text-justify-inter-cluster

Sets the text justification to inter-cluster.

CSS equivalent:

.text-justify-inter-cluster {
  text-align: justify;
  text-justify: inter-cluster;
}

Example usage:

<div class="text-justify-inter-cluster">
  <p>This text is justified with the inter-cluster justification mode.</p>
</div>

.text-justify-distribute

Sets the text justification to distribute.

CSS equivalent:

.text-justify-distribute {
  text-align: justify;
  text-justify: distribute;
}

Example usage:

<div class="text-justify-distribute">
  <p>This text is justified with the distribute justification mode.</p>
</div>

.text-justify-kashida

Sets the text justification to kashida.

CSS equivalent:

.text-justify-kashida {
  text-align: justify;
  text-justify: kashida;
}

Example usage:

<div class="text-justify-kashida">
  <p>This text is justified with the kashida justification mode.</p>
</div>

.text-justify-tibetan

Sets the text justification to Tibetan.

CSS equivalent:

.text-justify-tibetan {
  text-align: justify;
  text-justify: auto;
  text-align-last: justify;
}

Example usage:

<div class="text-justify-tibetan">
  <p>This text is justified with the Tibetan justification mode.</p>
</div>

Last updated