Skip to Main Content


You can use the following utility classes anywhere in your app to fine-tune the layout of your page and components. For most Oracle APEX components, you can simply populate the CSS Classes property to apply these modifiers to your page components.

Text Alignment

These classes are direction aware, meaning the text direction will be based on the direction of the language. For example, text using the u-textStart class will align text to the left for Left-to-Right languages, and will align text to the right for Right-to-Left languages.


Class Description
u-textStartAlign text to the start of the container
u-textCenterAlign text to the center of the container
u-textEndAlign text to the end of the container

Text Transform

These classes are useful when you want to control the text case for a given component. For example, an input field where you want characters to display in upper case.


Class Description
u-textUpperSets the text to use all uppercase
u-textLowerSets the text to use all lowercase
u-textInitCapSets the first letter in each word to use uppercase

Text Style

Use these classes as simple modifiers to control the text style of a given component. For example, you may want to use the u-bold to make the text of a button have a stronger weight.


Class Description
u-boldBold text
u-italicsItalicize text
u-underlineUnderline text
u-fixedFontUse a fixed-letter-space font
u-hiddenHide text
u-visibleShow text

Text Wrap

Use this class to force text not to wrap inside its container.


Class Description
u-nowrapText stays on one line and does not wrap

Text Limit

Use these classes as simple modifiers to restrict a block of text control to a specified number of lines. If a block of text surpasses the specified number of lines then an ellipses (...) is added and the remaining text is hidden.


Use the following class name structure with the options listed below to limit your text to a specified number of lines.


Variable Values Description
Number 1
The number of lines the block of text should be limited to.


<p class="u-lineclamp-1">This text will be limited to one line.</p>
<p class="u-lineclamp-2">This text will be limited to two lines.</p>


These classes can help you build more accessible apps and help you design a more usable experience for all users.


Class Description
u-VisuallyHiddenThis will make any text visually hidden, but still accessible for screen readers and other assistive technologies.