Use classes for reuse
Classes are the default choice for styling patterns you want to apply to more than one element or maintain as a design convention.
Adding Class or ID
You can add classes or IDs to your elements, using the properties inspector. Just select your element either in Design View (1) or in App Structure (2) and add
Class and ID Basics
Section titled “Class and ID Basics”Use classes and ids in Wappler with a clear separation between reusable styling hooks and one-off element targeting.
Introduction
Section titled “Introduction”Classes and ids solve different problems. In Wappler, keeping that distinction clear helps with styling, JavaScript targeting, anchors, and readable collaboration between visual editing and code-level inspection.
If you use ids where a class should do, the page becomes brittle. If you use generic classes with no naming intent, the page becomes hard to scan.
Use ids sparingly
Ids are best for one-off targets such as anchors, precise references, or framework-specific hooks that truly need a unique element.
Start with semantic HTML, then add classes for styling intent.
Treat ids as unique by definition.
Avoid baking visual meaning into every single class name.
Prefer a small set of clear reusable classes over many one-off names.
Make styling hooks readable
Section titled “Make styling hooks readable”Good class and id choices make the Properties panel, code view, and team conversations line up cleanly.
Class naming
Section titled “Class naming”Choose names that explain the role of the styling hook, not just the one screenshot you are looking at today.
Aim for reuse
A class name should still make sense when a second element needs the same styling intent.
ID usage
Section titled “ID usage”Reserve ids for true uniqueness. Common examples are skip links, collapsible target references, section anchors, or integrations that explicitly ask for an id.
Stay specific
If more than one element could reasonably need the same hook, it probably should be a class instead.
Work with Bootstrap, not against it
Section titled “Work with Bootstrap, not against it”Bootstrap already provides layout and utility choices for many common styling needs. Reach for those controls first, and add project-specific hooks only when they express meaning Bootstrap does not already cover.
Prefer existing controls
Use Bootstrap utilities and component-specific properties before creating extra styling hooks.
Next steps
Section titled “Next steps”With structure and naming clear, you can style layout rhythm more safely and continue into responsive image work or reactive pages.
Apply classes
Section titled “Apply classes”Learn how to apply classes in the Selection panels. Use this tour as a quick refresher.
Open Styles
Section titled “Open Styles”Applying classes is safer when you start from the selection workflow that makes the target element explicit. This how-to begins with that panel context, then explains how class changes fit into everyday page editing without losing track of which element you are styling.
Add a class
Section titled “Add a class”Add one or more classes to the selected element.
Override styles
Section titled “Override styles”Create overrides to customize styles without leaving the editor. This step matters because Override styles is part of the Styles panel, and understanding that context makes the next action easier to repeat in your own project.
