Utility Classes w Bootstrap 5

1. Wprowadzenie

Utility classes (klasy narzędziowe) to małe, wielokrotnego użytku klasy CSS, które pozwalają szybko stylować elementy bez pisania własnego CSS. Bootstrap 5 oferuje setki gotowych klas użytkowych.

Główne kategorie:

  • Spacing (marginesy i paddingi)
  • Kolory (tła i tekst)
  • Display i pozycjonowanie
  • Flexbox i grid
  • Wielkości i wymiary
  • Borders i zaokrąglenia
  • Cienie i opacity
  • Tekst i typografia

2. Spacing (Odstępy)

2.1. Marginesy i paddingi

Format: {property}{sides}-{size} lub {property}{sides}-{breakpoint}-{size}

Property: * m – margin * p – padding

Sides: * t – top (góra) * b – bottom (dół) * s – start (lewo w LTR) * e – end (prawo w LTR) * x – poziomo (lewo i prawo) * y – pionowo (góra i dół) * (brak) – wszystkie strony

Size: 0, 1, 2, 3, 4, 5, auto

Wartości spacing:

Klasa Wartość
0 0
1 0.25rem (4px)
2 0.5rem (8px)
3 1rem (16px)
4 1.5rem (24px)
5 3rem (48px)

3. Kolory

3.1. Kolory tekstu

3.2. Kolory tła

3.3. Opacity (przezroczystość)

4. Display

5. Flexbox Utilities

5.1. Flex container

5.2. Kierunek (direction)

5.3. Justify content (wyrównanie poziome)

5.4. Align items (wyrównanie pionowe)

5.5. Flex wrap

5.6. Gap (odstępy między elementami)

6. Pozycjonowanie

7. Borders (Obramowania)

7.1. Dodawanie borders

7.2. Usuwanie borders

7.3. Kolory borders

7.4. Zaokrąglenia (rounded)

8. Szerokość i wysokość

8.1. Szerokość (width)

8.2. Wysokość (height)

9. Tekst

9.1. Wyrównanie tekstu

9.2. Transform tekstu

9.3. Wielkość czcionki

9.4. Grubość czcionki (font weight)

9.5. Styl czcionki

9.6. Dekoracje tekstu

9.7. Line height

9.8. Zawijanie tekstu

10. Cienie (Shadows)

11. Overflow

12. Visibility

13. Interakcje użytkownika

14. Praktyczny przykład: Karta produktu

15. Podsumowanie

Utility classes w Bootstrap 5 to potężne narzędzie do szybkiego stylowania:

Najważniejsze kategorie:

  • Spacing – m-*, p-*, mx-*, my-*
  • Kolory – text-*, bg-*
  • Display – d-block, d-flex, d-none
  • Flexbox – justify-content-*, align-items-*, gap-*
  • Pozycjonowanie – position-*, top-*, start-*
  • Borders – border-*, rounded-*
  • Rozmiary – w-*, h-*
  • Tekst – text-*, fs-*, fw-*
  • Cienie – shadow-*

Zalety utility classes:

  • Szybkie prototypowanie
  • Spójność w projekcie
  • Responsywność (np. d-none d-md-block)
  • Mniej kodu CSS do pisania

Co dalej:

  • Customizacja Bootstrap
  • JavaScript API
  • Najlepsze praktyki
Wróć do spisu lekcji