Text Transformation

  1. <ion-grid>
  2.   <ion-row>
  3.     <ion-col>
  4.       <div class="ion-text-uppercase">
  5.         <h3>text-uppercase</h3>
  6.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
  7.       </div>
  8.     </ion-col>
  9.     <ion-col>
  10.       <div class="ion-text-lowercase">
  11.         <h3>text-lowercase</h3>
  12.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
  13.       </div>
  14.     </ion-col>
  15.     <ion-col>
  16.       <div class="ion-text-capitalize">
  17.         <h3>text-capitalize</h3>
  18.         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
  19.       </div>
  20.     </ion-col>
  21.   </ion-row>
  22. </ion-grid>

ClassStyle RuleDescription
.ion-text-uppercasetext-transform: uppercaseForces all characters to be converted to uppercase.
.ion-text-lowercasetext-transform: lowercaseForces all characters to be converted to lowercase.
.ion-text-capitalizetext-transform: capitalizeForces the first letter of each word to be converted to uppercase.

Responsive Text Classes

All of the text classes listed above have additional classes to modify the text based on the screen size. Instead of text- in each class, use text-{breakpoint}- to only use the class on specific screen sizes, where {breakpoint} is one of the breakpoint names listed in .

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.

ClassDescription
.ion-text-{modifier}Applies the modifier to the element on all screen sizes.
.ion-text-sm-{modifier}Applies the modifier to the element when min-width: 576px.
.ion-text-md-{modifier}Applies the modifier to the element when min-width: 768px.
.ion-text-lg-{modifier}Applies the modifier to the element when min-width: 992px.
.ion-text-xl-{modifier}Applies the modifier to the element when min-width: 1200px.

Element Placement

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.

ClassStyle RuleDescription
.ion-float-leftfloat: leftThe element will float on the left side of its containing block.
.ion-float-rightfloat: rightThe element will float on the right side of its containing block.
.ion-float-startfloat: left / float: rightThe same as float-left if direction is left-to-right and float-right if direction is right-to-left.
.ion-float-endfloat: left / float: rightThe same as float-right if direction is left-to-right and float-left if direction is right-to-left.

Responsive Float Classes

All of the float classes listed above have additional classes to modify the float based on the screen size. Instead of float- in each class, use float-{breakpoint}- to only use the class on specific screen sizes, where {breakpoint} is one of the breakpoint names listed in Ionic Breakpoints.

The table below shows the default behavior, where {modifier} is any of the following: left, right, start, or end, as they are described above.

The display CSS property determines if an element should be visible or not. The element will still be in the DOM, but not rendered, if it is hidden.

  1. <ion-grid>
  2.   <ion-row>
  3.     <ion-col class="ion-hide">
  4.       <div>
  5.         You can't see me.
  6.       </div>
  7.     </ion-col>
  8.     <ion-col>
  9.       <div>
  10.         <h3>not-hidden</h3>
  11.         You can see me!
  12.       </div>
  13.     </ion-col>
  14.   </ion-row>
  15. </ion-grid>

ClassStyle RuleDescription
.ion-hidedisplay: noneThe element will be hidden.

Responsive Display Attributes

There are also additional classes to modify the visibility based on the screen size. Instead of just .ion-hide for all screen sizes, use .ion-hide-{breakpoint}-{dir} to only use the class on specific screen sizes, where {breakpoint} is one of the breakpoint names listed in Ionic Breakpoints, and {dir} is whether the element should be hidden on all screen sizes above (up) or below (down) the specified breakpoint.

ClassDescription
.ion-hide-sm-{dir}Applies the modifier to the element when min-width: 576px (up) or max-width: 576px (down).
.ion-hide-md-{dir}Applies the modifier to the element when min-width: 768px (up) or max-width: 768px (down).
.ion-hide-lg-{dir}Applies the modifier to the element when min-width: 992px (up) or max-width: 992px (down).
.ion-hide-xl-{dir}Applies the modifier to the element when min-width: 1200px (up) or max-width: 1200px (down).

Content Space

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

ClassStyle RuleDescription
.ion-paddingpadding: 16pxApplies padding to all sides.
.ion-padding-toppadding-top: 16pxApplies padding to the top.
.ion-padding-startpadding-start: 16pxApplies padding to the start.
.ion-padding-endpadding-end: 16pxApplies padding to the end.
.ion-padding-bottompadding-bottom: 16pxApplies padding to the bottom.
.ion-padding-verticalpadding: 16px 0Applies padding to the top and bottom.
.ion-padding-horizontalpadding: 0 16pxApplies padding to the left and right.
.ion-no-paddingpadding: 0Applies no padding to all sides.

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 16px and is set by the —ion-margin variable. See the section for more information on how to change these values.

  1. <ion-grid>
  2.   <ion-row>
  3.     <ion-col class="ion-margin">
  4.       <div>
  5.         margin
  6.       </div>
  7.     </ion-col>
  8.     <ion-col class="ion-margin-top">
  9.       <div>
  10.         margin-top
  11.       </div>
  12.     </ion-col>
  13.     <ion-col class="ion-margin-start">
  14.       <div>
  15.         margin-start
  16.       </div>
  17.     </ion-col>
  18.     <ion-col class="ion-margin-end">
  19.       <div>
  20.         margin-end
  21.       </div>
  22.     </ion-col>
  23.   </ion-row>
  24.   <ion-row>
  25.     <ion-col class="ion-margin-bottom">
  26.       <div>
  27.         margin-bottom
  28.       </div>
  29.     </ion-col>
  30.     <ion-col class="ion-margin-vertical">
  31.         margin-vertical
  32.       </div>
  33.     </ion-col>
  34.     <ion-col class="ion-margin-horizontal">
  35.       <div>
  37.       </div>
  38.     </ion-col>
  39.     <ion-col class="ion-no-margin">
  40.       <div>
  41.         no-margin
  42.       </div>
  43.     </ion-col>
  44.   </ion-row>
  45. </ion-grid>

Flex Container Properties

ClassStyle RuleDescription
.ion-justify-content-startjustify-content: flex-startItems are packed toward the start on the main axis.
.ion-justify-content-endjustify-content: flex-endItems are packed toward the end on the main axis.
.ion-justify-content-centerjustify-content: centerItems are centered along the main axis.
.ion-justify-content-aroundjustify-content: space-aroundItems are evenly distributed on the main axis with equal space around them.
.ion-justify-content-betweenjustify-content: space-betweenItems are evenly distributed on the main axis.
.ion-justify-content-evenlyjustify-content: space-evenlyItems are distributed so that the spacing between any two items is equal.
.ion-align-items-startalign-items: flex-startItems are packed toward the start on the cross axis.
.ion-align-items-endalign-items: flex-endItems are packed toward the end on the cross axis.
.ion-align-items-centeralign-items: centerItems are centered along the cross axis.
.ion-align-items-baselinealign-items: baselineItems are aligned so that their baselines align.
.ion-align-items-stretchalign-items: stretchItems are stretched to fill the container.
.ion-nowrapflex-wrap: nowrapItems will all be on one line.
.ion-wrapflex-wrap: wrapItems will wrap onto multiple lines, from top to bottom.
.ion-wrap-reverseflex-wrap: wrap-reverseItems will wrap onto multiple lines, from bottom to top.
  1. <ion-grid>
  2.   <ion-row>
  3.     <ion-col class="ion-align-self-start">
  4.       <div>
  5.         1 of 4
  6.       </div>
  7.     </ion-col>
  8.     <ion-col class="ion-align-self-center">
  9.       <div>
  10.         2 of 4
  11.       </div>
  12.     </ion-col>
  13.     <ion-col class="ion-align-self-end">
  14.       <div>
  15.         3 of 4
  16.       </div>
  17.     </ion-col>
  18.     <ion-col>
  19.       <div>
  20.         4 of 4 <br>
  21.         # <br>
  22.         # <br>
  23.         #
  24.       </div>
  25.     </ion-col>
  26.   </ion-row>
ClassStyle RuleDescription
.ion-align-self-startalign-self: flex-startItem is packed toward the start on the cross axis.
.ion-align-self-endalign-self: flex-endItem is packed toward the end on the cross axis.
.ion-align-self-centeralign-self: centerItem is centered along the cross axis.
.ion-align-self-baselinealign-self: baselineItem is aligned so that its baseline aligns with other item baselines.
.ion-align-self-stretchalign-self: stretchItem is stretched to fill the container.
.ion-align-self-autoalign-self: autoItem is positioned according to the parent's align-items value.

Ionic Breakpoints

Ionic uses breakpoints in media queries in order to style an application differently based on the screen size. The following breakpoint names are used in the utility classes listed above, where the class will apply when the width is met.

Breakpoint NameWidth
xs0
sm576px
md768px
lg992px
xl