JavaScript Reference > ons-col

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

See also

Attributes

[improve this]

Attributes are added directly to the element. You can do this in HTML or JS.

HTML: <ons-col someAttribute="true" anotherAttribute><ons-col>
JS: document.querySelector('ons-col').setAttribute('someAttribute', 'true')

Name Type Description
vertical-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.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.