Mikanda mpe bandakisa mpo na ba utilitaires ya makomi oyo bato mingi basalelaka mpo na kokamba alignment, enveloppe, kilo, mpe mingi mosusu.

Kobongisa makomi

Facile réaligner texte na ba composants na ba classes ya alignment ya texte.

Makomi mosusu ya esika mpo na kolakisa boyokani ya makomi oyo ebongi. Okosala mpe bongo mpo na ngai? Ekomi tango ya ko facer musique naza lisusu muse na yo te. Yoki eza kitoko, zala juge na ba filles na ngai bakozua vote. Nakoki koyoka phoenix moko na kati na ngai. Lola eza na jaloux na bolingo na biso, ba ange bazo lela wuta likolo. Yeah, omemi ngai na utopie.

<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>

Mpo na alignment gauche, droite, mpe centre, ba classes responsives ezali oyo esalelaka ba points de rupture ya largeur ya port de vue ndenge moko na système ya grille.

Texte aligné gauche na ba taille nionso ya port de vue.

Centre aligné texte na ba taille nionso ya port de vue.

Texte aligné na droite na ba taille nionso ya port de vue.

Makomi oyo ezali na boyokani na lobɔkɔ ya mwasi na baporte ya kotala oyo ezali na bonene ya SM (ya moke) to ya monene koleka.

Makomi oyo ezali na boyokani na lobɔkɔ ya mwasi na baporte ya kotala oyo ezali na bonene ya MD (moyenne) to ya monene koleka.

Texte aligné gauche na ba viewports ya taille LG (ya monene) to ya large.

Texte aligné gauche na ba portes de vue ya taille XL (extra-large) to ya large.

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Enveloppement ya texte na débordement

Zinga makomi na .text-wrapkelasi moko.

Mokanda oyo esengeli kozinga.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Pekisa makomi ekangama na .text-nowrapkelasi moko.

Mokanda oyo esengeli kotonda na moboti.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Mpo na makambo ya molai, okoki kobakisa .text-truncatekelasi mpo na kokata makomi na ellipse. Esɛngaka display: inline-blockto display: block.

Praeterea iter est quasdam oyo ezali na kati ya lisanga ya bato.
Praeterea iter est quasdam oyo ezali na kati ya lisanga ya bato.
<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

Bopanzani ya maloba

Pekisa ba chaînes milayi ya makomi ebuka layout ya ba composants na yo na kosalelaka .text-breakto set word-wrap: break-wordmpe word-break: break-word. Tosalelaka na word-wrapesika ya oyo emonanaka mingi overflow-wrapmpo na lisungi ya navigateur ya monene, mpe tobakisi oyo esili word-break: break-wordmpo na koboya mikakatano na ba conteneurs flex.

MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Bobongoli ya makomi

Bobongola makomi na ba composants na ba classes ya makomi minene.

Makomi ya mike.

Makomi ya minene.

Mokanda ya CapitaliZé.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Talá ndenge .text-capitalizeoyo ebongoli kaka lɛtrɛ ya liboso ya liloba mokomoko, mpe etikaka likambo ya balɛtrɛ mosusu nyonso ezala na bopusi te.

Kilo ya makomi mpe makomi ya italike

Bobongola nokinoki kilo (boldness) ya makomi to bongisá makomi na italic.

Makomi ya moindo makasi.

Texte ya poids ya gras (relatif na élément parent).

Texte ya poids normal.

Texte ya kilo ya pɛpɛlɛ.

Texte ya poids léger (relatif na élément parent).

Makomi oyo ezali na italike.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>

Monoespace moko

Bobongola boponi na stack na biso ya makomi ya monospace na .text-monospace.

Oyo ezali na monospace

<p class="text-monospace">This is in monospace</p>

Réinitialiser couleur

Bozongisi langi ya makomi to ya lien na .text-reset, mpo ete ezwa langi epai ya moboti na yango.

Texte oyo ekangami na mongongo na lien ya réinitialisation .

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Décoration ya makomi

Longola décoration ya texte na .text-decoration-noneclasse moko.

<a href="#" class="text-decoration-none">Non-underlined link</a>