Source

Nkoma

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.

Ambitioni ya kosala ba scripsisse na yo. Cras mattis iudicium purus efandi amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam oyo ezali na kati ya lisanga ya bato. Na nos hinc posthac, maladi ya mboka Afros. Petierunt uti sibi concilium totius Galliae na kati ya mokolo oyo ezali na nkombo indicere. Cras mattis iudicium purus efandi amet fermentum.

<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</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 viewport.

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

Texte aligné gauche na ba portes de vue oyo ezali na taille ya MD (moyen) to ya large.

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

Makomi oyo ezali na boyokani na lobɔkɔ ya mwasi na bisika ya kotala oyo ezali na bonene ya XL (ya monene mingi) to ya monene koleka.

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

<!-- 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 overflow-wrap: break-word(mpe word-break: break-wordmpo na compatibilité ya IE & Edge).

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmąmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmommmmmmmommmommmommmommmommmommmommmommmommmommmo ( ()5 ()5 (

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

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

Lien oyo ezali na nse ya nse te

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