Kolommen

Leer hoe u kolommen kunt wijzigen met een handvol opties voor uitlijning, volgorde en compensatie dankzij ons flexbox-rastersysteem. Bekijk bovendien hoe u kolomklassen kunt gebruiken om de breedte van niet-rasterelementen te beheren.

Op deze pagina

Kop op! Zorg ervoor dat u eerst de rasterpagina leest voordat u zich verdiept in het wijzigen en aanpassen van uw rasterkolommen.

Hoe ze werken

Kolommen bouwen voort op de flexbox-architectuur van het raster. Flexbox betekent dat we opties hebben voor het wijzigen van individuele kolommen en het wijzigen van groepen kolommen op rijniveau . U kiest hoe kolommen groeien, krimpen of anderszins veranderen.
Bij het bouwen van rasterlay-outs gaat alle inhoud in kolommen. De hiërarchie van het Bootstrap-raster gaat van container naar rij naar kolom naar uw inhoud. In zeldzame gevallen kunt u inhoud en kolom combineren, maar houd er rekening mee dat er onbedoelde gevolgen kunnen zijn.
Bootstrap bevat vooraf gedefinieerde klassen voor het maken van snelle, responsieve lay-outs. Met zes breekpunten en een dozijn kolommen op elke rasterlaag, hebben we al tientallen klassen voor u gebouwd om uw gewenste lay-outs te maken. Dit kan desgewenst via Sass worden uitgeschakeld.

Uitlijning

Gebruik flexbox-uitlijnhulpprogramma's om kolommen verticaal en horizontaal uit te lijnen.

Verticale uitlijning

Een van de drie kolommen

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

Een van de drie kolommen

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

Horizontale uitlijning

Een van de twee kolommen

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

Kolomterugloop

Als er meer dan 12 kolommen in een enkele rij worden geplaatst, zal elke groep extra kolommen, als één geheel, op een nieuwe regel worden geplaatst.

.col-9

.col-4
Aangezien 9 + 4 = 13 > 12, wordt deze 4-koloms brede div als één aaneengesloten eenheid op een nieuwe regel gewikkeld.

.col-6
Volgende kolommen gaan verder langs de nieuwe regel.

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

Kolomeinden

Het afbreken van kolommen naar een nieuwe regel in flexbox vereist een kleine hack: voeg een element toe met width: 100%waar u uw kolommen naar een nieuwe regel wilt wikkelen. Normaal gesproken wordt dit bereikt met meerdere .rows, maar niet elke implementatiemethode kan hier rekening mee houden.

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

U kunt deze onderbreking ook toepassen op specifieke onderbrekingspunten met onze hulpprogramma's voor responsieve weergave .

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

Opnieuw ordenen

Bestel lessen

Gebruik .order-klassen om de visuele volgorde van uw inhoud te bepalen. Deze klassen zijn responsief, dus u kunt het orderby-breakpoint instellen (bijv. .order-1.order-md-2). Bevat ondersteuning voor 1alle 5zes rasterlagen.

Eerste in DOM, geen bestelling toegepast

Tweede in DOM, met een grotere bestelling

Derde in DOM, met een bestelling van 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>

Er zijn ook responsieve klassen .order-firsten .order-lastklassen die het orderelement van een element wijzigen door respectievelijk order: -1en toe te passen order: 6. Deze klassen kunnen indien nodig ook worden vermengd met de genummerde .order-*klassen.

Eerst in DOM, als laatste besteld

Tweede in DOM, ongeordend

Derde in DOM, eerst besteld

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

Kolommen compenseren

U kunt rasterkolommen op twee manieren verschuiven: onze responsieve .offset-rasterklassen en onze margehulpprogramma's . De grootte van rasterklassen is afgestemd op kolommen, terwijl marges nuttiger zijn voor snelle lay-outs waarbij de breedte van de offset variabel is.

Offset klassen

Verplaats kolommen naar rechts met behulp van .offset-md-*klassen. Deze klassen vergroten de linkermarge van een kolom met *kolommen. .offset-md-4Beweegt bijvoorbeeld .col-md-4over vier kolommen.

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

Naast het wissen van kolommen bij responsieve onderbrekingspunten, moet u mogelijk de offsets opnieuw instellen. Zie dit in actie in het rastervoorbeeld .

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

Marge-hulpprogramma's

Met de overstap naar flexbox in v4, kunt u margehulpprogramma's gebruiken .me-autoom kolommen van broers en zussen van elkaar af te dwingen.

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

Op zichzelf staande kolomklassen

De .col-*klassen kunnen ook buiten a worden gebruikt .rowom een element een bepaalde breedte te geven. Wanneer kolomklassen worden gebruikt als niet-directe onderliggende elementen van een rij, worden de opvullingen weggelaten.

.col-3: breedte van 25%

.col-sm-9: breedte van 75% boven sm breekpunt

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

De klassen kunnen samen met hulpprogramma's worden gebruikt om responsieve zwevende afbeeldingen te maken. Zorg ervoor dat u de inhoud in een .clearfixwrapper wikkelt om de float te wissen als de tekst korter is.

Een alinea met tijdelijke tekst. We gebruiken het hier om het gebruik van de clearfix-klasse te laten zien. We voegen hier nogal wat zinloze zinnen toe om te laten zien hoe de kolommen hier interageren met de zwevende afbeelding.

Zoals je kunt zien, lopen de alinea's sierlijk rond de zwevende afbeelding. Stel je nu eens voor hoe dit eruit zou zien met wat echte inhoud hier, in plaats van alleen deze saaie tijdelijke tekst die maar door en door gaat, maar eigenlijk geen tastbare informatie overbrengt. Het neemt gewoon ruimte in beslag en zou eigenlijk niet gelezen moeten worden.

En toch, hier ben je, nog steeds volhardend in het lezen van deze tijdelijke tekst, in de hoop op wat meer inzichten, of een verborgen paasei van inhoud. Een grapje misschien. Helaas is dat hier niet.

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