Przewodnik po klasach i funkcjach

Ta strona demonstruje wykorzystanie funkcji rem(), klas Bootstrap 5 oraz responsywnych mixinów.

System Grid Utility Classes

Responsywny box

Zmień rozmiar okna, aby zobaczyć zmiany

System Grid Bootstrap 5

Test 1: Podstawowa siatka (3 kolumny)

Kolumna 1

col-md-4

Kolumna 2

col-md-4

Kolumna 3

col-md-4

Test 2: Responsywna siatka (mobile → tablet → desktop)

Mobile: 100%
Tablet: 50%
Desktop: 25%
Mobile: 100%
Tablet: 50%
Desktop: 25%
Mobile: 100%
Tablet: 50%
Desktop: 25%
Mobile: 100%
Tablet: 50%
Desktop: 25%

Test 3: Różne guttery (odstępy między kolumnami)

g-0
g-0
g-0
g-2
g-2
g-2
g-4
g-4
g-4

Utility Classes

Test 4: Flexbox utilities

justify-content-between
align-items-center
d-flex
justify-content-center
gap-3
flex-column
gap-2

Test 5: Spacing utilities (margin i padding)

m-3 (margin ze wszystkich stron)
mt-4 (margin-top)
px-5 py-2 (padding X i Y)
mx-auto (wycentrowane)

Test 6: Display & Visibility

d-block
d-inline-block 1
d-inline-block 2
d-flex
d-none d-md-block (ukryte na mobile, widoczne od tabletu)

Test 7: Width utilities

w-100 (width: 100%)
w-75 (width: 75%)
w-50 (width: 50%)
w-25 (width: 25%)

Test 8: Text alignment

text-start (wyrównanie do lewej)

text-center (wycentrowane)

text-end (wyrównanie do prawej)

Test 9: Position utilities

top-0 start-0
top-0 end-0
bottom-0 start-0
bottom-0 end-0

Responsywne zachowanie (mixiny)

media-breakpoint-up()

Ta czcionka zmienia rozmiar w zależności od breakpointu:

  • Mobile (xs, sm): mniejsza czcionka
  • Tablet (md): średnia czcionka
  • Desktop (lg+): większa czcionka

media-breakpoint-down()

Ten padding zmniejsza się na mniejszych ekranach:

  • Desktop (lg+): duży padding
  • Tablet (md): średni padding
  • Mobile (sm, xs): mały padding