Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
in English

Tarreewwan

Akkaataa tarjaawwan filannoowwan muraasa waliin qindeessuu, tartiiba, fi ofseeti galata sirna giiridii flexbox keenyaatiin fooyyessuu baradhu. Dabalataan, akkaataa gita tarjaa fayyadamuun bal'ina qaamolee tarjaa hin taane bulchuuf ilaali.

Mataa ol qaba! Akkaataa tarjaawwan tarjaa kee fooyyessuu fi dhuunfachuutti osoo hin cuuphamin dura jalqaba fuula Tarree dubbisuu kee mirkaneessi .

Akkaataa itti hojjetan

Hiriirsuu

Tarjaawwan dhaabbataa fi qajeelaan qindeessuuf faayidaalee qindaa'ina flexbox fayyadami.

Hiriirsuu dhaabbataa

Tarree sadii keessaa tokko
Tarree sadii keessaa tokko
Tarree sadii keessaa tokko
Tarree sadii keessaa tokko
Tarree sadii keessaa tokko
Tarree sadii keessaa tokko
Tarree sadii keessaa tokko
Tarree sadii keessaa tokko
Tarree sadii keessaa tokko
<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>
Tarree sadii keessaa tokko
Tarree sadii keessaa tokko
Tarree sadii keessaa tokko
<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Hiriirsa qajeelaa

Tarree lama keessaa tokko
Tarree lama keessaa tokko
Tarree lama keessaa tokko
Tarree lama keessaa tokko
Tarree lama keessaa tokko
Tarree lama keessaa tokko
Tarree lama keessaa tokko
Tarree lama keessaa tokko
Tarree lama keessaa tokko
Tarree lama keessaa tokko
Tarree lama keessaa tokko
Tarree lama keessaa tokko
<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Marfamuu tarree

Yoo tarjaawwan 12 ol tarree tokko keessa kaa'aman, tokkoon tokkoon garee tarjaawwan dabalataa, akka yuunitii tokkootti, sarara haaraa irratti ni marma.

.kol-9 ta’a
.col-4
9 + 4 = 13 > 12 waan ta’eef, div bal’ina tarjaa 4 qabu kun akka yuunitii walitti aanee tokkootti sarara haaraa irratti marfama.
.col-6
Tarjaawwan itti aanan sarara haaraa irratti itti fufu.
<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Cabsa tarree

Tarreewwan gara sarara haaraatti flexbox keessatti cabsuun hack xiqqaa barbaada: elementii width: 100%bakka tarjaawwan kee gara sarara haaraatti marsuu barbaaddu hunda waliin dabali. Akka idileetti kun .rows dachaa waliin raawwatama, garuu mala hojiirra oolmaa hundi kanaaf herrega kennuu hin danda'u.

.kol-6 .kol-sm-3
.kol-6 .kol-sm-3
.kol-6 .kol-sm-3
.kol-6 .kol-sm-3
<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Akkasumas boqonnaa kana bakka boqonnaa murtaa'e irratti faayidaa agarsiisa deebii kennuu keenyaan hojiirra oolchuu dandeessa .

.kol-6 .kol-sm-4
.kol-6 .kol-sm-4
.kol-6 .kol-sm-4
.kol-6 .kol-sm-4
<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Irra deebiin tartiibessuu

Kutaalee ajajaa

Tartiiba mul'ataa qabiyyee keetii .order-to'achuuf kutaalee fayyadami . Gitoota kun deebii kan kennan waan ta'aniif, qabxii cabsuutiin saaguu dandeessa (fkn, ). Deeggarsa karaa sadarkaa giiridii ja'an hunda keessaa of keessatti qabata.order.order-1.order-md-215

Tokkoffaa DOM keessatti ajajni tokkollee hojiirra hin oolle
DOM keessatti lammaffaa, tartiiba guddaa ta'een
DOM keessatti sadaffaa, tartiiba 1
<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Akkasumas deebii kennanii .order-firstfi .order-lastgitaalee kanneen elementii tokkoo fi , akkaataa walduraa duubaan orderhojiirra oolchuudhaan jijjiiran jiru. Kutaawwan kun akka barbaachisummaa isaatti gita lakkoofsa qaban waliinis walitti makamuu danda'u .order: -1order: 6.order-*

DOM keessatti jalqaba, dhuma irratti ajajame
DOM keessatti lammaffaa, tartiiba hin qabne
DOM keessatti sadaffaa, dursee ajajame
<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Tarreewwan ofseeti gochuu

Tarreewwan tarjaa karaa lamaatiin ofseeti gochuu dandeessa: .offset-gita tarjaa deebii kennu keenyaa fi faayidaa margina keenyaa . Gitoota tarjaa tarjaawwan walsimsiisuuf safaramu yeroo ta'u margaaronni qindaa'inoota ariifataa bakka bal'inni ofseeti jijjiiramaa ta'eef caalaatti faayidaa qabu.

Kutaawwan ofseeti

.offset-md-*Gitoota fayyadamuun tarjaawwan gara mirgaatti sochoosi . Gitoota kunniin marga bitaa tarjaa tarjaadhaan dabalu *. Fakkeenyaaf, tarjaa afur irra .offset-md-4sochoosa ..col-md-4

.kol-md-4 jedhamuun beekama
.kol-md-4 .ofseeti-md-4
.kol-md-3 .ofseeti-md-3
.kol-md-3 .ofseeti-md-3
.kol-md-6 .ofseeti-md-3
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

Qabxiilee ciccituu deebii kennuu irratti tarjaa qulqulleessuu malees, ofseetota deebisanii saaguu si barbaachisuu danda'a. Kana gochaan fakkeenya tarjaa keessatti ilaali .

.kol-sm-5 .kol-md-6 jedhamuun beekama
.kol-sm-5 .ofseeti-sm-2 .kol-md-6 .ofseeti-md-0
.kol-sm-6 .kol-md-5 .kol-lg-6
.kol-sm-6 .kol-md-5 .ofseeti-md-2 .kol-lg-6 .ofseeti-lg-0
<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Faayidaaleen marginal

v4 keessatti gara flexbox tti ce'uu waliin, faayilii margina akka .me-autotarjaa obbolaa dirqisiisuun walirraa fageessuu fayyadamuu dandeessa.

.kol-md-4 jedhamuun beekama
.kol-md-4 .ms-ofumaan
.kol-md-3 .ms-md-ofumaan
.kol-md-3 .ms-md-ofumaan
.col-auto .na-otoo
.kol-otoo
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Kutaalee tarjaa of danda'an

Gitoota elementii tokkoof bal'ina murtaa'e kennuudhaaf aan .col-*alas fayyadamuu ni danda'u . .rowYeroo hunda gitaawwan tarjaa akka ijoollee kallattii hin taane tarree tokkootti fayyadaman, paadiin ni hafu.

.col-3: bal'ina 25% .
.col-sm-9: bal’ina 75% ol sm breakpoint
<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Gitoota fakkiiwwan deebii kennanii lola'an uumuuf faayidaa waliin fayyadamuun ni danda'ama. .clearfixYoo barruun gabaabaa ta'e lola'aa qulqulleessuuf qabiyyee marfata keessatti marsuu mirkaneessi .

Placeholder Responsive floated image

Keewwata barruu iddooqa. Fayyadama gita clearfix agarsiisuuf asitti fayyadamaa jirra. Akkaataa tarjaawwan fakkii lola'aa wajjin asitti walqunnaman agarsiisuuf gaaleewwan hiika hin qabne muraasa asitti dabalaa jirra.

Akkuma argitan keewwatni fakkii lola'e sanatti haala gaariin marsu. Amma mee yaadi akkamitti kun qabiyyee qabatamaa tokko tokko waliin as keessaa, barruu iddooqa nuffisiisaa kana qofa kan itti fufuu fi itti fufu osoo hin taane, garuu qabatamaan odeeffannoo qabatamaa hin dabarsu at. Salphaatti bakka waan fudhatuuf dhuguma dubbifamuu hin qabu.

Ammas, kunoo ati, ammallee barreeffama iddooqa kana dubbisuu irratti cimtee jirta, hubannoo dabalataa tokko tokko abdachaa jirta, ykn hanqaaquu Faasikaa dhokataa qabiyyee tokko tokko abdachaa jirta. Qoosaa, tarii. Kan nama dhibu, asitti wanti sun tokkollee hin jiru.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>