--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/referencja/klasy-css' title: 'Opis klas CSS. | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:48:20+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Treści DXPR Builder używają klas Bootstrap 5 obok kilku własnych klas. Ten opis wymienia te, których najpewniej użyjesz albo które obierzesz w CSS. tags: - 'Elements and CSS' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T02:48:20+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Opis klas CSS.' description: |- Treści DXPR Builder używają klas Bootstrap 5 obok kilku własnych klas. Ten opis wymienia te, których najpewniej użyjesz albo które obierzesz w CSS. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:48:20+0000' dateModified: '2026-10-24T02:48:20+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/referencja/klasy-css' articleSection: 'Elementy i CSS' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/referencja/klasy-css' description: |- Treści DXPR Builder używają klas Bootstrap 5 obok kilku własnych klas. Ten opis wymienia te, których najpewniej użyjesz albo które obierzesz w CSS. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Dokumentacja techniczna](/pl/hc/documentation/learn-dxpr-builder/reference) /[Elementy i CSS](/pl/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # Opis klas CSS.. Poznaj DXPR BuilderDokumentacja technicznaElementy i CSS ## W tym przewodniku Treści DXPR Builder używają klas Bootstrap 5 obok kilku własnych klas. Ten opis wymienia te, których najpewniej użyjesz albo które obierzesz w CSS. ## Dodawanie własnych klas 1. Wybierz element. 2. Otwórz **More > Settings**. 3. W sekcji **General** wybierz klasy w polu **HTML classes**. Aby wpisać dowolną nazwę klasy, kliknij **Edit as text** i oddziel klasy spacjami. ## Klasy siatki Bootstrap ### Klasy kontenerów | Klasa | Opis | |---|---| | `.container` | Wyśrodkowany kontener o stałej szerokości | | `.container-fluid` | Kontener na całą szerokość | ### Klasy wierszy i kolumn | Klasa | Opis | |---|---| | `.row` | Kontener flex dla kolumn | | `.col-{n}` | Kolumna o szerokości n/12 wiersza | | `.col-sm-{n}` | Szerokość kolumny na małych ekranach (od 576px) | | `.col-md-{n}` | Szerokość kolumny na średnich ekranach (od 768px) | | `.col-lg-{n}` | Szerokość kolumny na dużych ekranach (od 992px) | | `.col-xl-{n}` | Szerokość kolumny na bardzo dużych ekranach (od 1200px) | ## Klasy pomocnicze odstępów Bootstrap ### Margines | Klasa | Opis | |---|---| | `.m-{0-5}` | Margines ze wszystkich stron | | `.mt-{0-5}` | Margines górny | | `.mb-{0-5}` | Margines dolny | | `.ms-{0-5}` | Margines początkowy (po lewej w LTR) | | `.me-{0-5}` | Margines końcowy (po prawej w LTR) | | `.mx-{0-5}` | Margines po lewej i po prawej | | `.my-{0-5}` | Margines górny i dolny | ### Wypełnienie (padding) | Klasa | Opis | |---|---| | `.p-{0-5}` | Wypełnienie ze wszystkich stron | | `.pt-{0-5}` | Wypełnienie górne | | `.pb-{0-5}` | Wypełnienie dolne | | `.ps-{0-5}` | Wypełnienie początkowe | | `.pe-{0-5}` | Wypełnienie końcowe | | `.px-{0-5}` | Wypełnienie po lewej i po prawej | | `.py-{0-5}` | Wypełnienie górne i dolne | ## Klasy pomocnicze tekstu Bootstrap | Klasa | Opis | |---|---| | `.text-start` | Tekst wyrównany do lewej | | `.text-center` | Tekst wyśrodkowany | | `.text-end` | Tekst wyrównany do prawej | | `.fw-bold` | Tekst pogrubiony | | `.fw-light` | Tekst o cienkiej grubości | | `.fst-italic` | Tekst kursywą | | `.text-uppercase` | Tekst wielkimi literami | | `.text-lowercase` | Tekst małymi literami | | `.fs-1` to `.fs-6` | Rozmiar czcionki (1 największy) | ## Klasy pomocnicze kolorów Bootstrap ### Kolory tekstu | Klasa | Opis | |---|---| | `.text-primary` | Podstawowy kolor motywu | | `.text-secondary` | Dodatkowy kolor motywu | | `.text-success` | Zielony (sukces) | | `.text-danger` | Czerwony (niebezpieczeństwo/błąd) | | `.text-warning` | Żółty (ostrzeżenie) | | `.text-info` | Cyjan (informacja) | | `.text-muted` | Szary wyciszony tekst | | `.text-white` | Biały tekst | ### Kolory tła | Klasa | Opis | |---|---| | `.bg-primary` | Podstawowe tło | | `.bg-secondary` | Dodatkowe tło | | `.bg-success` | Zielone tło | | `.bg-danger` | Czerwone tło | | `.bg-warning` | Żółte tło | | `.bg-info` | Cyjanowe tło | | `.bg-light` | Jasnoszare tło | | `.bg-dark` | Ciemne tło | ## Klasy pomocnicze wyświetlania Bootstrap | Klasa | Opis | |---|---| | `.d-none` | Ukrywa element | | `.d-block` | Wyświetlanie blokowe | | `.d-inline` | Wyświetlanie liniowe | | `.d-sm-none` | Ukrywa na małych ekranach+ | | `.d-md-block` | Pokazuje na średnich ekranach+ | | `.d-lg-none` | Ukrywa na dużych ekranach+ | ## Klasy DXPR Builder ### Klasy elementów | Klasa | Opis | |---|---| | `.az-element` | Podstawowa klasa większości elementów treści; Button i Image jej nie mają, więc celuj w `.az-`. | | `.az-` | Jedna klasa na rodzaj elementu, na przykład `.az-text`, `.az-image` albo `.az-images-carousel`; Social Links używa `.st-social` | | `.az-section` | Element sekcji | | `.row` | Element wiersza (Bootstrap); treści ze starszych wersji mogą mieć też `.az-row` | | `.col-*` | Element kolumny (Bootstrap); treści ze starszych wersji mogą mieć też `.az-column` | ### Klasy animacji Animacje używają nazewnictwa animate.css. Gdy element się animuje, ma: | Klasa | Opis | |---|---| | `.animated` | Dodawana na czas animacji | | `.infinite` | Dodawana, gdy włączone jest **Infinite**. | | Nazwa animacji, na przykład `.fadeIn` | Odtwarzany efekt **Animation in** albo **Animation out**. | ### Klasy wariantów | Klasa | Opis | |---|---| | `.az-variant-container` | Kontener testu A/B, razem z `.rl-experiment` | | `.az-variant-wrapper` | Każde ramię wariantu | | `.az-variant-original` | Ramię pierwotne (A) | | `.az-variant-1`, `.az-variant-2` | Ramiona B, C i kolejne | | `.az-variant-active` | Aktualnie pokazywane ramię | ## Używanie klas do widoczności responsywnej Połącz klasy wyświetlania Bootstrap, aby pokazywać albo ukrywać treść na danych rozmiarach ekranu: ```html
Mobile content
Desktop content
``` Dodaj te klasy w polu **HTML classes** elementu (w sekcji **General** ustawień), aby sterować widocznością responsywną.