Buttons in grids

On this page you see examples of how you can use grids to layout buttons.

Basic

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:

Mini sized

Icon only, inline centered

Inline buttons can be centered by adding text-align: center; to your custom CSS.

Responsive

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.

Alignment

Use grid solo to align a single button with buttons in other grids.