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.
direction-column-reverse Stacks items in a column, reversing the default column order.
direction-row Direction in which lines of text are placed. Aligns items in rows as opposed to columns.
direction-row-reverse Aligns items in rows, reversing the default row order.
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-content- start Groups lines together at the top of the container.
end Groups lines together at the bottom of the container.
center Groups lines together in the vertical center of the container.
between Spreads lines evenly with no space at the edges.
around Spreads lines evenly with half-size space at the edges.
evenly Spreads lines evenly with equal space at the edges.
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.
u-gap- Refer to the Gap utilities on this page.

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>

Gap

Gap classes help to set the spacing between flex or grid items, controlling both row and column gaps in a single property. To use these utility classes make sure the parent element has the display property set to flex, inline-flex, or grid.

Options

Class Values
u-gap- 0 0 px
px 1 px
0_5 2 px
1 4 px
1_5 6 px
2 8 px
2_5 10 px
3 12 px
3_5 14 px
4 16 px
5 20 px
6 24 px
7 28 px
8 32 px
9 36 px
10 40 px

Example Markup


<div class="u-flex u-gap-4">
    <div class="row">Row 1</div>
    <div class="row">Row 2</div>
    <div class="row">Row 3</div>
</div>

Overflow

Controls what happens to content that is too large to fit inside its container.

Options

Class Description
u-overflow-autoAdds scrollbars only when content exceeds the container size.
u-overflow-hiddenContent that exceeds the container is clipped and hidden.
u-overflow-scrollAdds scrollbars to the container so all content can be reached.
u-overflow-x-scrollAdds horizontal scrollbars.
u-overflow-y-scrollAdds vertical scrollbars.
u-overflow-visibleContent spills outside the container and remains fully visible.
u-overflow-clipClips content like hidden, but also prevents any scrolling.

Example Markup


<div class="h50 u-overflow-y-scroll">
    <div class="row">In vestibulum mattis ornare. Ut nec turpis eget tortor volutpat ultricies. Mauris tempor ex ac mauris elementum scelerisque. Pellentesque a magna vitae ex pretium efficitur ac at neque. Vivamus auctor vel tellus vitae viverra. Aliquam quis quam velit. Vivamus sit amet semper est, quis eleifend diam. Pellentesque venenatis euismod dui sed dignissim. Nulla facilisi. Vestibulum in sollicitudin dolor. Vestibulum sollicitudin sollicitudin nibh, a ultricies est ornare id. Ut lorem quam, iaculis porta leo non, ultrices dapibus arcu. Sed venenatis ex vel viverra varius.</div>
</div>