CSS Utilities

Improve this doc

Ionic provides a set of utility attributes that can be used on any element in order to modify the text or adjust the padding or margin.

• Text Modification
  • Text Alignment
  • Text Transformation
  • Responsive Text Attributes
• Element Placement
  • Float Elements
  • Responsive Float Attributes
• Content Space
  • Element Padding
  • Element Margin
• Setting Attributes Dynamically

Text Modification

Text Alignment

Note: the example above is shown with custom styling.

<div text-left>
  text-left
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>
<div text-right>
  text-right
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>
<div text-center>
  text-center
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>
<div text-justify>
  text-justify
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>
<div text-wrap>
  text-wrap
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>
<div text-nowrap>
  text-nowrap
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Text Transformation

Note: the example above is shown with custom styling.

<div text-uppercase>
  text-uppercase
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>
<div text-lowercase>
  text-lowercase
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>
<div text-capitalize>
  text-capitalize
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>

Responsive Text Attributes

All of the text attributes listed above have additional attributes to modify the text based on the screen size. Instead of text- in each attribute, use text-{breakpoint}- to only use the attribute on specific screen sizes, where {breakpoint} is one of the defined breakpoints in the $screen-breakpoints variable. The table below shows the default behavior, where {modifier} is any of the following: left, right, start, end, center, justify, wrap, nowrap, uppercase, lowercase, or capitalize, as they are described above.

Element Placement

Float Elements

The float CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it. This way, the element is taken from the normal flow of the web page, though still remaining a part of the flow, contrary to absolute positioning.

Note: the example above is shown with custom styling.

<div float-left>
  <b>float-left</b><br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>
<div float-right>
  <b>float-right</b><br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>

Responsive Float Attributes

All of the float attributes listed above have additional attributes to modify the float based on the screen size. Instead of float- in each attribute, use float-{breakpoint}- to only use the attribute on specific screen sizes, where {breakpoint} is one of the defined breakpoints in the $screen-breakpoints variable. The table below shows the default behavior, where {modifier} is any of the following: left, right, start, or end, as they are described above.

Content Space

Element Padding

The padding attribute sets the padding area of an element. The padding area is the space between the content of the element and its border.

The default amount of padding to be applied is set by the $content-padding variable to 16px. Each mode can have a different value for padding by setting $content-ios-padding, $content-md-padding, or $content-wp-padding. See the overriding ionic variables section to change this value.

Note: the example above is shown with custom styling to show the padding that gets applied in green.

<div padding>
  padding
</div>
<div padding-top>
  padding-top
</div>
<div padding-left>
  padding-left
</div>
<div padding-right>
  padding-right
</div>
<div padding-bottom>
  padding-bottom
</div>
<div padding-vertical>
  padding-vertical
</div>
<div padding-horizontal>
  padding-horizontal
</div>
<div no-padding>
  no-padding
</div>

Element Margin

The margin area extends the border area with an empty area used to separate the element from its neighbors.

The default amount of margin to be applied is set by the $content-margin variable to 16px. Each mode can have a different value for margin by setting $content-ios-margin, $content-md-margin, or $content-wp-margin. See the overriding ionic variables section to change this value.

Note: the example above is shown with custom styling to show the margin that gets applied in orange.

<div margin>
  margin
</div>
<div margin-top>
  margin-top
</div>
<div margin-left>
  margin-left
</div>
<div margin-right>
  margin-right
</div>
<div margin-bottom>
  margin-bottom
</div>
<div margin-vertical>
  margin-vertical
</div>
<div margin-horizontal>
  margin-horizontal
</div>
<div no-margin>
  no-margin
</div>

Setting Attributes Dynamically

By setting a CSS attribute dynamically, you can add or remove functionality from a component based on a certain condition. To set an attribute dynamically, use the following syntax:

<div [attr.text-center]="isMD ? '' : null">I will be centered when isMD is true.</div>

This will set the text-center attribute on the div if isMD evaluates to true. Otherwise, the attribute will not be added.