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

Demo

<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

Demo

<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- 0
1
2
3
4
5 		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.
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 streching ‘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.

Demo


<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>

Margin

Margin classes can be added to help add spacing around your elements.

Options

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

margin-direction-spacing

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

Other Classes

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

Class Description
margin-noneNo margin
margin-sm8 px margin
margin-md16 px margin
margin-lg32 px margin
margin-autoaligns content into the center

Demo

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

Padding

Padding classes can be added to help add spacing within your elements.

Options

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

padding-direction-spacing

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

Other Classes

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

Class Description
padding-noneNo padding
padding-sm8 px padding
padding-md16 px padding
padding-lg32 px padding

Demo

<button class="padding-lg">Large button</button>
<div class="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

Demo

<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

Demo

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