---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/element-settings/custom-css'
title: 'Link to sections and reuse styles with classes | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Give an element an HTML ID for anchor links, and use HTML classes to hide it on phones, set spacing per screen size or reuse a look your theme defines'
tags:
  - 'Style your elements'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Link to sections and reuse styles with classes'
      description: 'Give an element an HTML ID for anchor links, and use HTML classes to hide it on phones, set spacing per screen size or reuse a look your theme defines'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/element-settings/custom-css'
      articleSection: 'Style your elements'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/element-settings/custom-css'
      description: 'Give an element an HTML ID for anchor links, and use HTML classes to hide it on phones, set spacing per screen size or reuse a look your theme defines'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Style your elements](/hc/documentation/learn-dxpr-builder/element-settings) # Link to sections and reuse styles with classes.

Give an element an HTML ID for anchor links, and use HTML classes to hide it on phones, set spacing per screen size or reuse a look your theme defines

 Learn DXPR BuilderBuild pagesStyle your elements

   ## In this guide

 Related guides

- [Responsive design](/hc/documentation/learn-dxpr-builder/design/responsive-design)

Give a section an **HTML ID** so a button can jump to it. Add **HTML classes** to hide an element on phones, to set spacing per screen size, or to reuse a look your theme defines. You find both fields at the bottom of the **General** panel of every element. A class keeps a look consistent: when its CSS rule changes, every element with that class follows.

The video follows the first recipe below: it makes a button jump to a section further down the page.

  ## Before you start

- Open the page in DXPR Builder; pointing at an element shows its control bar with **More**. New to the builder? See [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page).
- **Save** in the dialog keeps a change in the editor. **Save** on the builder toolbar above your content stores the page and shows "Saved field".
- **Use an HTML ID** for a jump target. A "Book a tour" button can scroll to the booking form. A list of links at the top of a long page can lead to each part.
- **Use a class for a look that repeats.** Your webmaster writes the CSS once, and you add the class where you need it. The **Style** panel copies values into each element instead, which drifts apart over time.
- **Use a class for what the Style panel cannot do**, such as hiding an element on phones or changing spacing per screen size.

## Recipe: a button that jumps to a section

1. Hover the target **Section**, click **More**, then **Settings**.
2. In the **General** panel, type a short name, such as `programmes`, in **HTML ID**. Click **Save**.
3. Open the settings of the **Button**. In **Link**, type `#` followed by exactly the same name: `#programmes`. Click **Save**.
4. Click **Save** on the builder toolbar.
5. Choose **Preview** in the view menu (the eye icon) and click the button.

Test with the section further down the page than the button, so you can see the scroll. If the target sits inside a collapsible panel, a tab or a carousel slide, the link opens it first.

## Recipe: hide an element on phones

1. Hover the element, click **More**, then **Settings**.
2. In the **General** panel, click the **HTML classes** box.
3. Pick **Hidden on extra small devices, phones (<576px)**. It sits in the **Responsive Visibility** group.
4. Click **Save** in the dialog, then **Save** on the toolbar.

The element now disappears on screens narrower than 576 px, in the editor too. To check it, open the page on a phone.

## Recipe: type your own classes

The **HTML classes** box only lets you pick from its list. To type a class name, switch it to text first.

1. Hover the element, click **More**, then **Settings**.
2. Under **HTML classes**, click **Edit as text**. The box turns into a plain text field that lists the classes the element already has.
3. Add your class names after them, separated by spaces, for example `brand-card py-3 py-lg-5`. Leave out the dot: `.brand-card` in your team's CSS is `brand-card` here.
4. Click **Save** in the dialog, then **Save** on the toolbar.

The element takes the look your web team defined.

## What you see

In **Preview**, the button scrolls the page smoothly to the section and leaves room for a sticky header; the address bar ends in `#programmes`. Below 576 px wide, the hidden element is gone. Classes you typed show as chips the next time you open the dialog, in quotes when they are not in the list, such as "brand-card".

## How the fields work

### HTML ID

An ID must start with a letter. After that it may hold letters, numbers, hyphens and underscores, but no spaces. A wrong ID shows an error under the field, and **Save** does nothing until you fix it.

If you leave the field empty, the element keeps an ID that DXPR Builder made. The empty field shows it in grey. Use each ID once per page: when two elements share one, links jump to the first.

### HTML classes

The list holds shadow classes and Bootstrap 5 classes, grouped by job, such as **Margins**, **Padding**, **Responsive Visibility** and **Rounded Corners**. Your theme can add a group of its own at the end.

Scroll the open list, or type part of a name such as padding, py-5 or circular to narrow it. Typing only filters the list; for a class that is not in it, use **Edit as text**.

Bootstrap's classes only work when the page loads Bootstrap 5. It comes from your theme, or from **General Settings** > **Bootstrap** (`/admin/dxpr_studio/dxpr_builder/settings`), where **Sideload Bootstrap files** is set to **Bootstrap 5**.

Bootstrap's utility classes, such as the colour and spacing classes, are marked `!important`. They beat the **Style** panel on the same property. **Primary background** beats **Background**, and **Top margin size 3 (mt-3)** beats the top **Margin**.

A class with a screen size in its name applies from that width up:

| In the class name | Applies from |
|---|---|
| `sm` | 576 px |
| `md` | 768 px |
| `lg` | 992 px |
| `xl` | 1200 px |
| `xxl` | 1400 px |

So `py-3 py-lg-5` gives 16 px of padding at the top and bottom on smaller screens, and 48 px from 992 px wide.

### For your theme developer

A class needs a CSS rule in the theme, for example:

```css
.brand-card {
  background: #f4f6fb;
  border-left: 4px solid #1a4d8f;
  padding: 2rem;
}

```

To show the class in the **HTML classes** list for editors, register it in the theme's `.info.yml`; see [Utility classes](/hc/documentation/learn-dxpr-builder/customization/utility-classes). For styles across the whole site, see [Custom CSS](/hc/documentation/learn-dxpr-builder/customization/custom-css).

## If you don't see it

- **Save does nothing and HTML ID says "ID must start with a letter".** The ID breaks the rules above. Start it with a letter, and use only letters, numbers, hyphens and underscores.
- **You cannot type a new class.** The box only filters its list. Click **Edit as text** first.
- **A class you expect is missing from the list.** The list holds only the classes DXPR Builder and your theme define. Click **Edit as text** and type it.
- **The button does not scroll at all.** **Link** must be `#` followed by exactly the HTML ID, with the same capitals. Check both fields, and test in **Preview**.
- **A class has no effect.** The name is misspelt, the theme has no rule for it, or Bootstrap 5 is not loaded. Check the spelling, then ask your webmaster about the rule or **Sideload Bootstrap files**.
- **Your team's class changes only some things.** A **Style** panel value on the same property beats a theme class. Clear that value in the **Style** panel.
- **The button jumps to the wrong place.** Two elements share the ID, and the first one wins. Give each element its own ID.
- **The section heading hides under the sticky header.** DXPR Builder does not recognise your header. A webmaster sets **Scroll offset selector** under **General Settings** > **Advanced Settings** (`/admin/dxpr_studio/dxpr_builder/settings`) to the header's CSS selector.

## What's next?

- [Responsive design](/hc/documentation/learn-dxpr-builder/design/responsive-design): plan which elements to show on each screen size.