Vue 2 Reference > v-ons-col

v-ons-col

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

Usage 


<v-ons-row>
  <v-ons-col width="50px"><v-ons-icon icon="fa-twitter"></v-ons-icon></v-ons-col>
  <v-ons-col>Text</v-ons-col>
</v-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

Props

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.