Skip to Main Content

Introduction

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.

Floats

To float an element, you can use the u-pullDirection utility classes.

Classes

Class Description
u-pullLeftFloat to left
u-pullRightFloat to right

Example Markup

<button class="u-pullLeft">Foo</button> <!-- Float button to the left -->
<div class="u-pullRight">Hello World</div> <!-- Float div to the right -->

Vertical Alignment

To vertically-align the contents of an element you can use the u-alignDirection utility class.

Classes

Class Description
u-alignTopVertically align to the top
u-alignMiddleVertically align to the middle
u-alignBaselineVertically align to the text baseline
u-alignBottomVertically align to the bottom

Example Markup

<table>
  <tbody>
    <tr>
      <td class="u-alignTop">Hello World!</td>
      <td class="u-alignMiddle">I'm in the middle!</td>
    </tr>
  </tbody>
</table>

Flex

These utility classes can be added to help arrange items in rows, columns or more "flexible" layouts. They can also help with item alignment, content justification, content ordering, and content spacing.

Classes

Class Values Description
u-flex Treat the element as a flex container and its children as flex items.
u-flex- item Size item according to its width and height properties, but grow to absorb any extra free space in the flex container and shrink to its minimum size to fit the container.
direction-column Direction in which lines of text are stacked. Aligns items in columns as opposed to rows.
wrap Break flex items into multiple lines.
wrap-nowrap Lay flex items out in a single line which may cause the flex container to overflow.
u-flex-basis- auto Set the size of the element relative to the width and height of the content of the element.
100 Set the size of the element(s) to 100% of the available space in the parent container.
0 Prevent the element(s) from taking up the available space in the parent container.
u-flex-grow- 1 Allow the item to grow to fit available space.
0 Do not allow the item to grow to fit available space.
u-flex-shrink- 1 Allow the item to shrink to fit available space.
0 Prevent the item from shrinking to fit available space.
u-order- Refer to the Order utilities on this page.
u-justify-content- flex-start Horizontally align (justify) content to the start of the div.
flex-end Horizontally align (justify) content to the end of the div.
center Horizontally align (justify) content to the center of the div.
space-between Distribute content evenly with the first item flush with the start and the last item flush with the end.
space-around Distribute content evenly with a half-size space on either end of items.
stretch Distribute content evenly by stretching 'auto'-sized items to fit the container.
u-align-items- flex-start Vertical alignment. The cross-start margin edges of the flex items are flushed with the cross-start edge of the line.
flex-end Vertical alignment. The cross-end margin edges of the flex items are flushed with the cross-end edge of the line.
start Vertical alignment. Pack items flush to each other toward the start edge of the alignment container in the appropriate axis.
center Vertically align all items to the center of the div.
end Vertical alignment. Pack items flush to each other toward the end edge of the alignment container in the appropriate axis.
u-align-self- flex-start Vertical alignment of individual flex item. Flush the cross-start margin edges of the flex item with the cross-start edge of the line.
flex-end Vertical alignment of individual flex item. Flush the cross-end margin edges of the flex item with the cross-end edge of the line.
start Vertical alignment of individual flex item. Pack the item flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
center Vertically align individual flex item to the center of the div.
end Vertical alignment of individual flex item. Pack the item flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
stretch Vertical alignment of individual flex item. Stretch flex item such that the cross-size of the item margin box is the same as the line while respecting widget and height constraints.

Example Markup


<div class="u-flex u-align-items-center">
    <div class="u-order-3">This column will appear as the 3rd column and centered</div>
    <div class="u-order-1 u-align-self-center">This column will be first and aligned at the start of the row</div>
    <div class="u-order-2">This column will appear as the 2nd column</div>
</div>

Order

Order classes can help you place elements in a different order. Order is a flex based property. To use these utility classes make sure the parent element has the display property set to flex, inline-flex, or grid.

Options

Set the order to lay out an item in a flex container. Items in a container are sorted by ascending order value and then by their source code order.

Class Values
u-order- 0
1
2
3
4
5

Other Classes

Use these classes to adjust the order of your elements when the viewport size is at the specified breakpoint.

Class Description
u-order-xxs-number479px and below
u-order-xs-number480px to 639px
u-order-sm-number640px to 767px
u-order-md-number768px to 991px
u-order-lg-number992px to 1199px
u-order-xl-number1200px to 1399px
u-order-xxl-number1400px and above

Example Markup


<div class="u-flex">
    <div class="u-order-3">This column will appear as the 3rd column</div>
    <div class="u-order-1">This column will be first</div>
    <div class="u-order-2 u-order-xxs-1">

      This column will appear first when the viewport is below 479px wide.

      And will appear as the second column when the viewport is 480px and wider.

    </div>
</div>

Margin

Margin classes can be added to help add spacing around your elements. As of Universal Theme 24.2 we added the "u-" prefix to margin utility classes.

Options

Use the following class name structure with the options listed below to add spacing around your element.

u-margin-direction-spacing

Variable Values Description
Direction top
right
bottom
left
block
inline 		Where the margin should be positioned
Spacing none 0 px
xs 4 px
sm 8 px
md 16 px
lg 32 px
xl 48 px 		The amount of spacing in pixels.

Other Classes

Use these classes to adjust spacing around all sides of your element.

Class Description
u-margin-noneNo margin
u-margin-xs4 px margin
u-margin-sm8 px margin
u-margin-md16 px margin
u-margin-lg32 px margin
u-margin-xl48 px margin
u-margin-inline-autoaligns content into the center

Example Markup

<h1 class="u-margin-auto">Centered Heading Text</h1>
<p class="u-margin-top-lg">Content with a large margin on top.</p>

Padding

Padding classes can be added to help add spacing within your elements. As of Universal Theme 24.2 we added the "u-" prefix to padding utility classes.

Options

Use the following class name structure with the options listed below to add spacing around your element.

u-padding-direction-spacing

Variable Values Description
Direction top
right
bottom
left
block
inline 		Where the padding should be positioned
Spacing none 0 px
xs 4 px
sm 8 px
md 16 px
lg 32 px
xl 48 px 		The amount of spacing in pixels.

Other Classes

Use these classes to adjust spacing within all sides of your element.

Class Description
u-padding-noneNo padding
u-padding-xs4 px padding
u-padding-sm8 px padding
u-padding-md16 px padding
u-padding-lg32 px padding
u-padding-xl48 px padding

Example Markup

<button class="u-padding-lg">Large button</button>
<div class="u-padding-left-md">Little bit of padding on the side.</div>

Width

Text

Options

Classes Values Description
wamount 10-800 px Sets the element's width to specified value. Sizes in 10px increments.
wpercentagep 5-100 % Sets the element's width to specified percentage. Percentages in 5% increments
mnwamount 10-800 px Sets the element's min-width to specified value. Sizes in 10px increments
mxwamount 10-800 px Sets the element's max-width to specified value. Sizes in 10px increments

Example Markup

<div class="w95p mxw800">This region will be 95% wide with a max-widht of 800px.</div>

Height

Text

Options

Classes Values Description
hamount 10-800 px Sets the element's height to specified value. Sizes in 10px increments
mxhamount 10-800 px Sets the element's max-height to specified value. Sizes in 10px increments

Example Markup

<div class="h400">This region would be 400px tall.</div>