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
u-align-self-centerVertically align to the center in a column

Demo

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

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>