in English

Empagi

Yiga engeri y’okukyusaamu empagi n’enkola entonotono ez’okulaganya, okulagira, n’okukyusakyusa olw’enkola yaffe eya flexbox grid. Plus, laba engeri y'okukozesaamu column classes okuddukanya obugazi bw'ebintu ebitali bya grid.

Ku muko guno

Emitwe gigulumivu! Kakasa nti osooka kusoma lupapula lwa Grid nga tonnabuuka mu ngeri y’okukyusaamu n’okulongoosa empagi zo eza grid.

Engeri gye zikolamu

Ennyiriri zizimba ku nsengeka ya flexbox eya grid. Flexbox kitegeeza nti tulina eby'okulonda okukyusa empagi ssekinnoomu n'okukyusa ebibinja by'ennyiriri ku ddaala ly'ennyiriri . Ggwe olondawo engeri empagi gye zikulamu, gye zikendeeramu oba engeri endala gye zikyukamu.
Nga ozimba ensengeka za grid, ebirimu byonna bigenda mu mpagi. Ensengeka ya Bootstrap's grid egenda okuva ku container okudda ku row okudda ku column okutuuka ku content yo. Ku mirundi egitatera kubaawo, oyinza okugatta ebirimu n’ennyiriri, naye kimanye nti wayinza okubaawo ebivaamu ebitali bigenderere.
Bootstrap erimu kiraasi ezitegekeddwa edda okukola ensengeka ez’amangu, eziddamu. Nga tulina ebifo mukaaga eby’okumenya n’ennyiriri kkumi ku buli mutendera gwa giridi, tulina amakumi ga kiraasi ezaazimbibwa dda okukola ensengeka z’oyagala. Kino osobola okukilemesa ng'oyita mu Sass bw'oba oyagala.

Okukwatagana

Kozesa ebikozesebwa mu kulaganya kwa flexbox okulaga empagi mu vertikal ne horizontal.

Okulaganya okw’okwesimbye

Emu ku mpagi ssatu

html

<div class="container text-center">
  <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>

Emu ku mpagi ssatu

html

<div class="container text-center">
  <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>

Okulaganya okw’okwebungulula

Emu ku mpagi bbiri

html

<div class="container text-center">
  <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>

Okuzinga empagi

Singa empagi ezisukka mu 12 ziteekebwa mu lunyiriri lumu, buli kibinja ky’ennyiriri ez’enjawulo kijja, nga yuniti emu, okuzinga ku layini empya.

.col-9 nga bwe kiri

.col-4
Okuva 9 + 4 = 13 > 12, div eno eya 4-column-wide efuna okuzingibwa ku layini empya nga yuniti emu ekwatagana.

.col-6
Ennyiriri eziddako zigenda mu maaso ku layini empya.

html

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

Empagi emenya

Okumenya empagi ku layini empya mu flexbox kyetaagisa hack entono: yongera ku elementi ne width: 100%wonna w’oyagala okuzinga empagi zo ku layini empya. Mu budde obwabulijjo kino kituukirira ne .rows eziwera, naye si buli nkola y’okussa mu nkola nti esobola okubala kino.

.kol-6 .kolo-sm-3

html

<div class="container text-center">
  <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>

Oyinza n'okukozesa okuwummulamu kuno ku bifo ebitongole eby'okuwummulamu n'ebikozesebwa byaffe eby'okulaga ebiddamu .

.kol-6 .kolo-sm-4

html

<div class="container text-center">
  <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>

Okuddamu okulagira

Lagira emisomo gy’okusoma

Kozesa .order-kiraasi okufuga ensengeka y’ebirabika eby’ebirimu byo. Ebika bino biddamu, kale osobola okuteekawo orderby breakpoint (okugeza, .order-1.order-md-2). Mulimu obuwagizi 1okuyita 5mu mitendera gyonna omukaaga egya grid.

Ekisooka mu DOM, tewali kiragiro kikozesebwa

Ekyokubiri mu DOM, nga kiriko order ennene

Ekyokusatu mu DOM, nga waliwo order ya 1

html

<div class="container text-center">
  <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>

Waliwo ne responsive .order-firstne .order-lastclasses ezikyusa the orderof an element nga zikozesa order: -1ne order: 6, respectively. Ebisulo bino nabyo bisobola okutabula ne .order-*kiraasi eziriko ennamba nga bwe kyetaagisa.

Okusooka mu DOM, okulagirwa okusembayo

Ekyokubiri mu DOM, nga tekiragirwa

Ekyokusatu mu DOM, yasooka kulagira

html

<div class="container text-center">
  <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>

Okukyusakyusa empagi

Osobola okukyusakyusa empagi za giridi mu ngeri bbiri: kiraasi zaffe eza .offset-giridi eziddamu n’ebikozesebwa byaffe eby’oku mabbali . Grid classes ziweebwa sayizi okukwatagana ne columns ate margins zisinga kuba za mugaso ku layouts ez’amangu nga obugazi bwa offset bukyukakyuka.

Ebisulo bya Offset

Tambuza ennyiriri ku ddyo ng’okozesa .offset-md-*kiraasi. Ebika bino byongera ku mabbali ga kkono ag’ennyiriri ku *mpagi. Okugeza, .offset-md-4etambula .col-md-4ku mpagi nnya.

.col-md-4 nga bwe kiri

.col-md-4 .okukyusakyusa-md-4

.col-md-3 .okukyusakyusa-md-3

.col-md-6 .okukyusakyusa-md-3

html

<div class="container text-center">
  <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>

Ng’oggyeeko okulongoosa empagi ku bifo eby’okumenya ebiddamu, oyinza okwetaaga okuddamu okuteekawo offsets. Kino laba mu bikolwa mu kyokulabirako kya grid .

.kolo-sm-5 .kol-md-6

.col-sm-5 .okukyusa-sm-2 .col-md-6 .okukyusa-md-0

.kol-sm-6 .kol-md-5 .kolo-lg-6

.col-sm-6 .col-md-5 .okukyusakyusa-md-2 .col-lg-6 .okukyusa-lg-0

html

<div class="container text-center">
  <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>

Ebikozesebwa mu kukola margin

Nga ogenda ku flexbox mu v4, osobola okukozesa margin utilities nga .me-autookukaka sibling columns okuva ku ndala.

.col-md-4 nga bwe kiri

.col-md-4 .ms-omuto

.col-md-3 .ms-md-okubeera mu ngeri ey’obwengula

.col-oto .nze-otoma

.col-omuto

html

<div class="container text-center">
  <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>

Ebisulo by’emiko egy’okwetongola

Ebika .col-*era bisobola okukozesebwa ebweru wa a .rowokuwa ekintu obugazi obw’enjawulo. Buli kiraasi z’ennyiriri lwe zikozesebwa ng’abaana abatali butereevu ab’olunyiriri, paddings zirekebwawo.

.col-3: obugazi bwa 25% .

.col-sm-9: obugazi bwa 75% waggulu wa sm breakpoint

html

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

Ebika bisobola okukozesebwa wamu n’ebikozesebwa okukola ebifaananyi ebitengejja ebiddamu. Kakasa nti ozinga ebirimu mu .clearfixkizinga okulongoosa ekiwujjo singa ekiwandiiko kiba kimpi.

Akatundu k’ebiwandiiko ebiteekebwamu ekifo. Tukikozesa wano okulaga enkozesa ya kiraasi ya clearfix. Tugattako ebigambo ebitonotono ebitaliimu makulu wano okulaga engeri empagi gye zikwataganamu wano n’ekifaananyi ekitengejja.

Nga bw’olaba ennyiriri zizingira mu ngeri ey’ekitiibwa ekifaananyi ekitengejja. Kati teebereza engeri kino gye kyandirabise n’ebimu ebituufu ebirimu wano, okusinga kino kyokka ekiboola ekifo ekiwandiiko ekigenda mu maaso n’okugenda mu maaso, naye mu butuufu tekituusa tewali mawulire gakwata ku. Kimala kutwala kifo era mu butuufu tekisaanye kusoma.

Era naye, wuuno, ng’okyagumiikiriza mu kusoma ekiwandiiko kino eky’ekifo, ng’osuubira okutegeera okulala, oba eggi lya paasika eryakwekebwa ery’ebirimu. Ekisesa, mpozzi. Ebyembi, wano tewali ku ebyo.

html

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