Buttons in grids
On this page you see examples of how you can use grids to layout buttons.
Buttons in grids get a bit margin left and right. There is one exception; fullwidth
button elements (i.e. not inline or icon-only). Because of the 100% width the margin can't be applied to the element directly. You can wrap them in a
div and give this the same margin as other buttons as we do in this example:
Icon only, inline centered
Inline buttons can be centered by adding
text-align: center; to your custom CSS.
It's not recommended to have many buttons with text on one row at small screens, because the text might get truncated. You can use responsive grids to stack the buttons at small screens. Here we use the framework preset breakpoint by adding class
ui-responsive to the container.
Use grid solo to align a single button with buttons in other grids.