Customizacja Bootstrap 5

1. Wprowadzenie

Bootstrap 5 oferuje wiele sposobów na dostosowanie wyglądu do własnych potrzeb. Możesz zmienić kolory, czcionki, rozmiary, breakpointy i prawie każdy aspekt frameworka.

Metody customizacji:

  • CSS Variables (Custom Properties) – najprostsza metoda
  • Sass – pełna kontrola, wymaga kompilacji
  • Nadpisywanie CSS – szybkie, ale mniej eleganckie
  • Bootstrap Customizer – online (tylko Bootstrap 4)

2. Customizacja przez CSS Variables

Bootstrap 5 używa natywnych zmiennych CSS (custom properties), które można łatwo nadpisać.

2.1. Główne zmienne kolorów

2.2. Czcionki

2.3. Border radius (zaokrąglenia)

2.4. Przykład pełnej customizacji

3. Customizacja przez Sass

Sass daje pełną kontrolę nad Bootstrap. Wymaga jednak konfiguracji środowiska.

3.1. Instalacja

3.2. Struktura plików

projekt/
├── scss/
│   └── custom.scss
├── node_modules/
└── package.json

3.3. Tworzenie custom.scss

3.4. Kompilacja Sass

Dodaj skrypt do package.json:

Kompiluj:

3.5. Użycie skompilowanego CSS

4. Nadpisywanie styli przez własny CSS

Najprostsza metoda, ale mniej elastyczna.

4.1. Podstawowa zasada

Załaduj swój CSS PO Bootstrap CSS, żeby nadpisać style.

4.2. Przykład custom.css

5. Dodawanie własnych kolorów

5.1. Przez CSS Variables

5.2. Przez Sass

6. Zmiana breakpointów

6.1. Przez Sass

7. Własne komponenty

7.1. Przykład: Custom Card

Użycie:

8. Dark Mode (Tryb ciemny)

Bootstrap 5.3+ ma wbudowane wsparcie dla dark mode.

8.1. Automatyczny dark mode

8.2. Przełącznik dark mode

9. Przykład: Kompletna customizacja

10. Podsumowanie

Customizacja Bootstrap 5 daje pełną kontrolę nad wyglądem:

Metody customizacji:

  • CSS Variables – najszybsza, bez kompilacji
  • Sass – pełna kontrola, wymaga konfiguracji
  • Nadpisywanie CSS – proste, ale mniej eleganckie

Co można customizować:

  • Kolory (primary, secondary, success, etc.)
  • Czcionki i typografia
  • Spacing (marginesy, paddingi)
  • Border radius (zaokrąglenia)
  • Breakpointy (responsywność)
  • Rozmiary kontenerów
  • Komponenty (przyciski, karty, etc.)

Najlepsze praktyki:

  • Używaj CSS Variables dla prostych zmian
  • Sass dla kompleksowych projektów
  • Zachowaj spójność kolorów i spacingu
  • Testuj na różnych urządzeniach

Co dalej:

  • Bootstrap i JavaScript
  • Responsywność w praktyce
  • Najlepsze praktyki i optymalizacja
Wróć do spisu lekcji