YouTip LogoYouTip

Foundation Input Sizing

Use grid columns to set the size of input fields, such as `.large-6`, `.medium-6`, etc. For more on the grid system, you can click the (#) tutorial. ### Example
[Try it Β»](#) * * * ## Equal-sized Columns The following demonstrates an example of equal-sized columns: ### Example
[Try it Β»](#) * * * ## Inline Labels If you want your label content to appear on the left (not on top), you can place the label element in a different column to the left of the input field, and use the `.inline` class to vertically center it: ### Example
[Try it Β»](#) * * * ## Prefix and Postfix Labels You can add prefix and postfix labels within `
`, using the elements: `` or ``. You can use the grid system to set the size of the prefix and postfix labels: ### Example
Prefix
Postfix
[Try it Β»](#) ### Prefix and Postfix Label Buttons You can use the `` element with the `.button` class to create prefix and postfix buttons: ### Example Go [Try it Β»](#) ### Prefix and Postfix Label Rounded Buttons ### Example
Prefix
Postfix
Go
Go
[Try it Β»](#)
← Foundation SwitchesFoundation Forms β†’