--- url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B2%D1%96%D0%B4%D0%BD%D0%B8%D0%BA/css-%D0%BA%D0%BB%D0%B0%D1%81%D0%B8' title: 'Довідник CSS-класів | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T20:00:19+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Вміст DXPR Builder використовує класи Bootstrap 5 поряд із кількома власних класів. Цей довідник перелічує ті, які ви найімовірніше використовуватимете або адресуватимете в 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-24T20:00:19+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Довідник CSS-класів' description: |- Вміст DXPR Builder використовує класи Bootstrap 5 поряд із кількома власних класів. Цей довідник перелічує ті, які ви найімовірніше використовуватимете або адресуватимете в CSS. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T20:00:19+0000' dateModified: '2026-10-24T20:00:19+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/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B2%D1%96%D0%B4%D0%BD%D0%B8%D0%BA/css-%D0%BA%D0%BB%D0%B0%D1%81%D0%B8' articleSection: 'Елементи та CSS' - '@type': WebPage '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%BE%D0%B2%D1%96%D0%B4%D0%BD%D0%B8%D0%BA/css-%D0%BA%D0%BB%D0%B0%D1%81%D0%B8' description: |- Вміст DXPR Builder використовує класи Bootstrap 5 поряд із кількома власних класів. Цей довідник перелічує ті, які ви найімовірніше використовуватимете або адресуватимете в CSS. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/uk' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: uk --- [Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Довідник](/uk/hc/documentation/learn-dxpr-builder/reference) /[Елементи та CSS](/uk/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # Довідник CSS-класів. Вивчення DXPR BuilderДовідникЕлементи та CSS ## In this guide Вміст DXPR Builder використовує класи Bootstrap 5 поряд із кількома власних класів. Цей довідник перелічує ті, які ви найімовірніше використовуватимете або адресуватимете в CSS. ## Додавання власних класів 1. Виберіть елемент. 2. Відкрийте **More > Settings**. 3. У розділі **General** виберіть класи в полі **HTML classes**. Щоб ввести будь-яке ім’я класу, натисніть **Edit as text** і розділіть класи пробілами. ## Класи сітки Bootstrap ### Класи контейнерів | Клас | Опис | |---|---| | `.container` | Центрований контейнер фіксованої ширини | | `.container-fluid` | Контейнер на повну ширину | ### Класи рядків і стовпців | Клас | Опис | |---|---| | `.row` | Flex-контейнер для стовпців | | `.col-{n}` | Стовпець завширшки n/12 рядка | | `.col-sm-{n}` | Ширина стовпця на малих (576px+) | | `.col-md-{n}` | Ширина стовпця на середніх (768px+) | | `.col-lg-{n}` | Ширина стовпця на великих (992px+) | | `.col-xl-{n}` | Ширина стовпця на XL (1200px+) | ## Службові класи відступів Bootstrap ### Поля | Клас | Опис | |---|---| | `.m-{0-5}` | Поле із усіх боків | | `.mt-{0-5}` | Поле зверху | | `.mb-{0-5}` | Поле знизу | | `.ms-{0-5}` | Поле на початку (ліворуч у LTR) | | `.me-{0-5}` | Поле в кінці (праворуч у LTR) | | `.mx-{0-5}` | Поле ліворуч і праворуч | | `.my-{0-5}` | Поле зверху й знизу | ### Внутрішні відступи | Клас | Опис | |---|---| | `.p-{0-5}` | Відступ із усіх боків | | `.pt-{0-5}` | Відступ зверху | | `.pb-{0-5}` | Відступ знизу | | `.ps-{0-5}` | Відступ на початку | | `.pe-{0-5}` | Відступ у кінці | | `.px-{0-5}` | Відступ ліворуч і праворуч | | `.py-{0-5}` | Відступ зверху й знизу | ## Службові класи тексту Bootstrap | Клас | Опис | |---|---| | `.text-start` | Текст, вирівняний ліворуч | | `.text-center` | Центрований текст | | `.text-end` | Текст, вирівняний праворуч | | `.fw-bold` | Жирний текст | | `.fw-light` | Текст легкого накреслення | | `.fst-italic` | Курсивний текст | | `.text-uppercase` | Текст великими літерами | | `.text-lowercase` | Текст малими літерами | | `.fs-1` до `.fs-6` | Розмір шрифту (1 найбільший) | ## Службові класи кольорів Bootstrap ### Кольори тексту | Клас | Опис | |---|---| | `.text-primary` | Основний колір теми | | `.text-secondary` | Вторинний колір теми | | `.text-success` | Зелений (успіх) | | `.text-danger` | Червоний (небезпека/помилка) | | `.text-warning` | Жовтий (попередження) | | `.text-info` | Блакитний (інформація) | | `.text-muted` | Сірий приглушений текст | | `.text-white` | Білий текст | ### Кольори тла | Клас | Опис | |---|---| | `.bg-primary` | Основне тло | | `.bg-secondary` | Вторинне тло | | `.bg-success` | Зелене тло | | `.bg-danger` | Червоне тло | | `.bg-warning` | Жовте тло | | `.bg-info` | Блакитне тло | | `.bg-light` | Світло-сіре тло | | `.bg-dark` | Темне тло | ## Службові класи відображення Bootstrap | Клас | Опис | |---|---| | `.d-none` | Приховати елемент | | `.d-block` | Блокове відображення | | `.d-inline` | Рядкове відображення | | `.d-sm-none` | Приховати на малих+ | | `.d-md-block` | Показати на середніх+ | | `.d-lg-none` | Приховати на великих+ | ## Класи DXPR Builder ### Класи елементів | Клас | Опис | |---|---| | `.az-element` | Базовий клас на більшості елементів вмісту; Button і Image його не мають, тож адресуйте натомість `.az-`. | | `.az-` | По одному класу на тип елемента, як-от `.az-text`, `.az-image` або `.az-images-carousel`; Social Links використовує `.st-social` | | `.az-section` | Елемент розділу | | `.row` | Елемент рядка (Bootstrap); вміст зі старіших версій може також мати `.az-row` | | `.col-*` | Елемент стовпця (Bootstrap); вміст зі старіших версій може також мати `.az-column` | ### Класи анімацій Анімації використовують іменування animate.css. Поки елемент анімується, він має: | Клас | Опис | |---|---| | `.animated` | Додається, доки триває анімація | | `.infinite` | Додається, коли **Infinite** увімкнено | | Ім’я анімації, як-от `.fadeIn` | Ефект **Animation in** або **Animation out**, що відтворюється | ### Класи варіантів | Клас | Опис | |---|---| | `.az-variant-container` | Контейнер А/Б-тесту, разом із `.rl-experiment` | | `.az-variant-wrapper` | Кожна гілка варіанта | | `.az-variant-original` | Оригінальна гілка (A) | | `.az-variant-1`, `.az-variant-2` | Гілки B, C і так далі | | `.az-variant-active` | Гілка, показана зараз | ## Використання класів для адаптивної видимості Поєднуйте службові класи відображення Bootstrap, щоб показувати чи ховати вміст на певних розмірах екрана: ```html
Mobile content
Desktop content
``` Додайте ці класи в полі елемента **HTML classes**(у розділі **General** налаштувань), щоб керувати адаптивною видимістю.