Barreeffama

Galmee fi fakkeenyota faayilii barruu waliigalaa qindaa'ina, marfama, ulfaatina, fi kkf to'achuuf.

Fuula kana irratti

Hiriirsuu barruu

Barruu gara qaamolee gita qindeessaa barruu qabanitti salphaatti irra deebi'ii qindeessii. Hiriirsa jalqabaa, xumuraa fi giddugaleessaaf, gitaawwan deebii kennanii kanneen tuqaawwan ciccituu bal'ina buufata ilaalchaa sirna tarjaa walfakkaataa fayyadaman jiru.

Barruu qindaa'e hammangaawwan buufata ilaalchaa hunda irratti jalqabi.

Barruu giddugaleessa qindaa'e hammangaawwan buufata ilaalchaa hunda irratti.

Barruu qindaa'e hammangaawwan buufata ilaalchaa hunda irratti xumuri.

Barruu qindaa'e buufatawwan ilaalchaa safara SM (xiqqaa) ykn bal'aa irratti jalqabi.

Barruu qindaa'e buufatawwan ilaalchaa safara MD (giddugaleessa) ykn bal'aa irratti jalqabi.

Barruu qindaa'e buufatawwan ilaalchaa safara LG (guddaa) ykn bal'aa qaban irratti jalqabi.

Barruu qindaa'e buufatawwan ilaalchaa hamma XL (dabalataa-guddaa) ykn bal'aa irratti jalqabi.

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

Hubadhaa barruu haqa qabeessaaf gita faayidaa hin kenninu. Miidhaginaan, barreeffamni sirrii ta’e caalaatti hawwataa fakkaachuu danda’us, addaan fageenya jechootaa caalaatti akka tasaa waan ta’eef dubbisuuf akka ulfaatu taasisa.

Barruu marfamuu fi dhangala'uu

.text-wrapBarruu gita tokkoon marsi .

Barreeffamni kun marfamuu qaba.

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

Barruun akka .text-nowrapgita waliin hin maramne dhorki.

Barreeffamni kun warraa dhangala'uu qaba.

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

Jecha cabsuu

Tarreewwan barruu dheeraa akka qindaa'ina qaamolee kee hin cabsine .text-breakto set word-wrap: break-wordfi fayyadamuun ittisi word-break: break-word. word-wrapDeeggarsa biraawzari bal'aadhaaf bakka baay'ee beekamaa ta'e fayyadamna , akkasumas dhimmoota qabduu flex waliin uumaman hambisuuf kanneen hin overflow-wrapbarbaachifne itti daballa .word-break: break-word

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

Hubadhaa jechoota cabsuun Arabic , afaan RTL baay'inaan itti fayyadamnu keessatti hin danda'amu. Kanaaf .text-breakRTL keenya CSS qindaa'e irraa ni haqama.

Jijjiirraa barruu

Barruu qaamolee gita qubee guddaa barruu qaban keessatti jijjiiri.

Barreeffama qubee xiqqaa qabu.

Barreeffama qubee guddaa qabu.

Barreeffama CapiTaliZed ta'e.

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

Hubadhu akkamitti .text-capitalizequbee jalqabaa jecha tokkoon tokkoo qofa akka jijjiiru, haala qubeewwan biroo kamiyyuu osoo hin tuqamin dhiisu.

Guddina qubee

font-sizeDafii barruu of jijjiiri . Kutaawwan mata duree keenyaa (fkn, .h1– .h6) , , fi , font-sizehojiirra oolan, faayidaan kunniin qofa hojiirra oolu . Faayidaawwan kanaaf safaruun qaamolee mataduree HTML waliin walsima, kanaafuu akkuma lakkoofsi dabalaa deemuun, guddinni isaanii ni hir'ata.font-weightline-heightfont-size

.fs-1 barreeffama

.fs-2 barreeffama

.fs-3 barreeffama

.fs-4 barreeffama

.fs-5 barreeffama

.fs-6 barreeffama

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

Kaartaa Sass font-sizefooyyessuudhaan s kee kan jiru dhuunfachiisi .$font-sizes

Ulfaatina qubee fi qubee jallisii

font-weightFaayidaalee kanaan dafii ykn font-stylebarruu jijjiiri . font-styleutilities akka gabaabfamee .fst-*utilities font-weightakka .fw-*.

Barreeffama jajjaboo.

Barruu ulfaatina jajjaboo (qaama warraa wajjin walqabatee).

Barreeffama ulfaatina idilee.

Barreeffama ulfaatina salphaa qabu.

Barruu ulfaatina salphaa (qaama warraa wajjin walqabatee).

Barruu jallisii.

Barruu akkaataa qubee idilee waliin

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

Olka’iinsa sararaa

Olka'iinsa sararaa .lh-*faayidaa waliin jijjiiri.

Kun keewwata dheeraa akkaataa olka’iinsi sarara elementii tokkoo faayidaa keenyaan dhiibbaa irra ga’u agarsiisuuf barreeffameedha. Gitoonni qaama mataa isaa irratti ykn yeroo tokko tokko qaama warraa irratti hojii irra oolu. Kutaawwan kun akka barbaachisummaa isaatti API faayidaa keenyaatiin dhuunfachuun ni danda'ama.

<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 jedhamuun beekama

Filannoo gara tuullaa qubee monospace keenyaatti jijjiiri .font-monospace.

Kunis monospace keessatti argama

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

Halluu irra deebi'ii saagi

Halluu barruu ykn hidhaa .text-reset, akka inni halluu warra isaa irraa dhaalutti deebisi.

Barruu dhaamfame hidhaa deebisanii dhaabuu waliin .

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

Faaya barreeffamaa

Barruu qaamolee keessatti gita faaya barruutiin faaya.

Barreeffamni kun jala isaa sarara qaba.

Barreeffamni kun sarara keessa darbu qaba.

Hidhiin kun faaya barreeffama isaa irraa haqameera

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

Jijjiiramoota

// 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;

Kaartaa

Faayidaaleen guddina qubee kaartaa kana irraa uumamu, API faayidaa keenyaa wajjin walqabatee.

$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
);

API faayidaa

Faayidaaleen qubee fi barruu faayidaa API keenya keessatti labsamu bara scss/_utilities.scss. Akkaataa API faayilii itti fayyadamtu baradhu.

    "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
    ),