ons-col

Represents a column in the grid system. Use with ons-row to layout components.

Usage #

<ons-row>
  <ons-col width="50px"><ons-icon icon="fa-twitter"></ons-icon></ons-col>
  <ons-col>Text</ons-col>
</ons-row>

Note: For Android 4.3 and earlier, and iOS6 and earlier, when using mixed alignment with ons-row and ons-column, they may not be displayed correctly. You can use only one align.

Live Example #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

See also #

Attributes #

Name Type
Default Value
Description
align String Vertical alignment of the column. Valid values are "top", "center", and "bottom". Optional
width String The width of the column. Valid values are css width values ("10%", "50px"). Optional

Discussion #