#

Navigation Search

- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Filterable New
- Dialogs
- Fixed toolbars
- Flip switch, slider
- Flip switch New
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icons New
- Links
- Listviews
- Loader
- Navbar
- Navbar, persistent
- Pages
- Panels
- Popup
- Radio buttons
- Select
- Select, custom
- Slider, single
- Slider, dual range
- Table, column toggle
- Table, reflow
- Text inputs & textarea
- Transitions
- Collapsibles
- Dynamic collapsible
- Controlgroups
- Dynamic controlgroup
- Filterable
- Filterable inside custom select
- Listviews
- Grid Listview
- Autodividers Linkbar
- Autodividers Selector
- Maps
- Google Maps & Geolocation
- Google Maps with List toggle
- Navigation
- Backbone and Require.js example
- Redirection with server-side support
- Panels
- Panel styling
- Open panel on swipe
- Popups
- Dynamic popup
- Popup arrow size
- Popup alignment
- Responsive Tables
- Reflow: Custom styles
- Reflow: Heading groups
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle demo: Phone comparison
- Sliders
- Tooltip extension
- Swipe
- Swipe to navigate
- Swipe to delete list item
- Forms
- Why won't my CSS styles apply correctly to a widget?
- Updating the value of enhanced form elements does not work.
- My HTML 5 inputs look different across devices and browsers.
- My range or search inputs are being change to number/text.
- Sometimes my custom select shows as a popup other times its a dialog.
- Disabling a button does not work.
- Controls in my fixed header or footer are not responding or behave erratically.
- Pages
- Why aren't my scripts and styles loading?
- Why isn't DOM ready working for my scripts?
- How do I load a page?
- Why is only the first page of my multi page document loaded?
- I'm trying to pass query params to a page but it's not working?
- I'm trying to pass information via the hash but it's not working?
- I'm trying to use the application cache but it's not working.
- Content injected into a page is not enhanced.
- Triggering create on injected HTML does not work.
- How can I stop JQM from auto-enhancing an element?
- How can I stop JQM from enhancing a block of elements?
- How do I control page titles?
- How do I load a page?
- How do I turn off the automatic hiding of the url bar?
- Events
- How do I use touch and mouse events?
- Theme and styling
- How does theming work?
- Apps
- How do I need to configure PhoneGap/Cordova?

# 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:

Anchor
Select
Checkbox
Radio

## Mini sized

Anchor
Select
Checkbox
Radio

## Icon only, inline centered

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

Button
Button
Button
Button
Button

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

Back to order

## Alignment

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

Grid B
Grid B
Grid B
Grid A
Grid A
Grid Solo
Outside the grid
Back to Grids