Textum

Documenta et exempla pro communi textu utilitates ad alignment, involutionem, pondus, et plura.

In hac pagina

Gratia diei et noctis text

Facile realign textum ad partes cum textu alignment classes. Ad initium, finem et centrum noctis, responsalivae classes praesto sunt, qui eodem prospectu latitudinis rupturas utantur ac ratio eget.

Committitur varius textus in omnibus magnitudinum viewport.

Centrum textus varius in omnibus magnitudinum prospectui.

Finis varius textus in omnibus magnitudinum viewport.

Committitur varius textus in prospectibus amplis SM (small) vel latius.

Committitur varius textus in prospectu mediocri MD (medio) vel latius.

Committitur varius textus in prospectu mediocri LG (magnus) vel latior.

Committitur varius textus in prospectibus amplis XL (extra-magnus) vel latior.

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

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

Nota quod classes utilitates ad textum iustificatum non praebemus. Dum, textus aesthetice iustificatus magis appellatum viderit, efficit verba-spatii magis temere et ideo difficilius ad legendum.

Textus involventes et redundantiam

Involve textum cum .text-wrapgenere.

Hic textus debet involvere.

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

Preoccupo textum ab involvendo cum .text-nowrapgenere.

Hic locus exuberat parens.

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

Verbum confractus

Ne longas textuum chordas abrumpant tuas components' layout utendo .text-breakad paro word-wrap: break-wordet word-break: break-word. word-wrapLoco communiore utimur pro overflow-wrapampliori pasco subsidium, et deprecationem adicimus word-break: break-wordad vitandas quaestiones cum vasis inflexis.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmo

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

Nota verba fractionis arabice fieri non posse , quae lingua RTL usitata est . Ergo .text-breaksublata RTL compilata CSS.

Textum transform

Textum in compositionibus cum textu uncialium classes transmutare.

Textum Lowercased.

Textum Uppercased.

CapiTaliZed text.

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

Nota quomodo .text-capitalizetantum prima littera cuiusque verbi mutatur, relictis reliquis litteris integris.

font-sizeCito textum muta . Dum in capite nostro classes (eg, .h1- .h6) applicantur font-size, font-weightet line-heighthae tantum utilitatibus applicantur font-size. Ad has utilitates examinandas elementorum capita HTML compositus est, quo numerus augetur, magnitudo eorum decrescit.

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Domicilii tui in promptu habendo font-sizes modificatione $font-sizesSass map.

Pondus et italics

Velociter muta textum cum his utilitatibus font-weight. utilitas abbreviata ut utilitasque abbreviata ut .font-stylefont-style.fst-*font-weight.fw-*

Bold text.

Bold pondus textum (relativum ad elementum parentis).

Normal text pondus.

Leve pondus textum.

Levius pondus textum (relativum ad elementum parentis).

Textus itaiicus.

Text with normal font style

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

Linea altitudo

Recta altitudo cum .lh-*utilitate mutatur.

Haec longa paragraphus scripta est ut ostenderet quomodo linea altitudo elementi nostris utilitatibus afficiatur. Suspendisse elementum elementum ipsum, vel interdum ipsum elementum ac. Hae classes esse possunt nativus ut opus sit cum utilitate nostra API.

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>

Monospace

Change a selection to our monospace font acervum cum .font-monospace.

Hoc est in monospace

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

Reddere color

Reponere textum vel nexum cum colore .text-reset, ut colorem a parente trahat.

Transmutari textum cum reset link .

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

Textus ornamentum

Decorate textum in componentibus cum classibus ornamentorum textorum.

Haec linea sub hoc textu habet.

Hic locus per lineam transit.

Haec nexus habet textum ornamentum remotum

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

Sass

Variabilium

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$variable-prefix}font-sans-serif);
$font-family-code:            var(--#{$variable-prefix}font-monospace);

// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;

Maps

utilitates font-size generantur ex hac tabula, in compositione cum nostris utilitatibus API.

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

Utilitas API

Font et textus utilitates in nostris utilitatibus declarantur API in scss/_utilities.scss. Utilitatibus uti disce API.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$variable-prefix}font-monospace))
    ),
    "font-size": (
      rfs: true,
      property: font-size,
      class: fs,
      values: $font-sizes
    ),
    "font-style": (
      property: font-style,
      class: fst,
      values: italic normal
    ),
    "font-weight": (
      property: font-weight,
      class: fw,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        bolder: $font-weight-bolder
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: $line-height-sm,
        base: $line-height-base,
        lg: $line-height-lg,
      )
    ),
    "text-align": (
      responsive: true,
      property: text-align,
      class: text,
      values: (
        start: left,
        end: right,
        center: center,
      )
    ),
    "text-decoration": (
      property: text-decoration,
      values: none underline line-through
    ),
    "text-transform": (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize
    ),
    "white-space": (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      )
    ),
    "word-wrap": (
      property: word-wrap word-break,
      class: text,
      values: (break: break-word),
      rtl: false
    ),