Culonni

Amparate cumu mudificà e colonne cù una mansa di opzioni per l'allineamentu, l'ordine è l'offset grazie à u nostru sistema di griglia flexbox. In più, vede cumu utilizà classi di colonna per gestisce l'larghezza di elementi non-grid.

In sta pagina

A testa alta ! Assicuratevi di leghje a pagina Grid prima prima di tuffà in cumu mudificà è persunalizà e vostre colonne di griglia.

Cumu travaglianu

I culonni si basanu nantu à l'architettura flexbox di a griglia. Flexbox significa chì avemu opzioni per cambià e colonne individuali è mudificà gruppi di colonne à u livellu di fila . Sceglite cumu cresce, si riduce, o altrimenti cambianu e colonne.
Quandu custruiscenu layout di griglia, tuttu u cuntenutu va in colonne. A ghjerarchia di a griglia di Bootstrap va da cuntainer à fila à colonna à u vostru cuntenutu. In rari occasioni, pudete cumminà u cuntenutu è a colonna, ma sia cuscenti chì ponu esse cunsequenze impreviste.
Bootstrap include classi predefinite per creà layout veloci è responsivi. Cù sei punti di rottura è una decina di colonne à ogni livellu di griglia, avemu decine di classi digià custruitu per voi per creà i vostri layout desiderati. Questu pò esse disattivatu via Sass se vulete.

Allineamentu

Aduprate l'utilità di allineamentu flexbox per allineà e colonne verticalmente è orizontali.

Allineamentu verticale

Una di trè colonne

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

Una di trè colonne

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

Allineamentu horizontale

Una di duie colonne

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

Imballaggio di a colonna

Se più di 12 culonni sò posti in una sola fila, ogni gruppu di colonne extra, cum'è una unità, si mette in una nova linea.

.col-9

.col-4
Siccomu 9 + 4 = 13 > 12, stu div di 4-column-wide si mette in una nova linea cum'è una unità cuntigua.

.col-6 Culonni
successivi cuntinueghjanu longu a nova linea.

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

A colonna si rompe

A rottura di e colonne à una nova linea in flexbox richiede un picculu pirate: aghjunghje un elementu cù width: 100%induve vulete imbulighjà e vostre colonne in una nova linea. Normalmente questu hè realizatu cù parechje .rows, ma micca ogni metudu di implementazione pò cuntà per questu.

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

Pudete ancu applicà sta pausa à punti di rottura specifichi cù e nostre utilità di visualizazione rispunsevuli .

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

Riordinu

Ordine classi

Aduprate .order-classi per cuntrullà l'ordine visuale di u vostru cuntenutu. Queste classi sò responsive, cusì pudete stabilisce u orderper breakpoint (per esempiu, .order-1.order-md-2). Include supportu 1à traversu 5tutti i sei livelli di griglia.

Prima in DOM, nisun ordine applicatu

Siconda in DOM, cù un ordine più grande

Terzu in DOM, cù un ordine di 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>

Ci sò ancu rispunsevuli .order-firstè .order-lastclassi chì cambianu l' orderelementu applicà order: -1è order: 6, rispettivamente. Queste classi ponu ancu esse mischiate cù e classi numerate .order-*cum'è necessariu.

Prima in DOM, urdinatu l'ultimu

Siconda in DOM, senza ordine

Terzu in DOM, urdinatu prima

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

Colonne di compensazione

Pudete cumpensà e colonne di griglia in dui modi: e nostre .offset-classi di griglia responsive è e nostre utilità di margine . E classi di griglia sò dimensionate per currisponde à e colonne mentre i marghjini sò più utili per i layout rapidi induve a larghezza di l'offset hè variabile.

Classi offset

Sposta e colonne à a diritta usendu .offset-md-*classi. Queste classi aumentanu u margine di manca di una colonna per *colonne. Per esempiu, .offset-md-4si move .col-md-4nantu à quattru culonni.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-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>

In più di l'eliminazione di a colonna à i punti d'interruzione responsive, pudete avè bisognu di resettate l'offsets. Vede questu in azzione in l'esempiu di griglia .

.col-sm-5 .col-md-6

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

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-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>

Utilità di margine

Cù u muvimentu in flexbox in v4, pudete aduprà l'utilità di marghjini cum'è .me-autoper furzà e colonne frateddi alluntanate l'una da l'altru.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

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

Classi di colonna standalone

E .col-*classi ponu ancu esse aduprate fora di a .rowper dà un elementu una larghezza specifica. Sempre chì e classi di colonna sò aduprate cum'è figlioli non diretti di una fila, i padding sò omessi.

.col-3: larghezza di 25%

.col-sm-9: larghezza di 75% sopra 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>

E classi ponu esse aduprate inseme cù utilità per creà l'imaghjini fluttuati rispunsevuli. Assicuratevi di imbulighjà u cuntenutu in un .clearfixinvolucro per sguassà u float se u testu hè più curtu.

Un paràgrafu di testu di placeholder. Avemu aduprà quì per mustrà l'usu di a classa clearfix. Aghjunghjemu uni pochi di frasi senza significatu quì per dimustrà cumu e culonne interagiscenu quì cù l'imaghjini fluttuati.

Cum'è pudete vede, i paragrafi s'imbulighjanu cù grazia intornu à l'imaghjini fluttuati. Avà immaginate cumu si vede questu cun un cuntenutu attuale quì, piuttostu cà solu stu testu di piazzamentu noioso chì continua, ma in realtà ùn trasmette micca infurmazione tangibile. Simpricamente occupa u spaziu è ùn deve esse veramente lettu.

Eppuru, eccu, sempre perseverante in a lettura di stu testu di placeholder, sperendu per qualchi più insights, o qualchì ovu di Pasqua nascostu di cuntenutu. Un scherzu, forse. Sfortunatamente, ùn ci hè nunda di questu quì.

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