By default, all buttons in the body content are styled as block-level element so they fill the width of the screen:Button
However, if you want a more compact button that is only as wide as the text and icons inside, add the
data-inline="true" attribute to the button:
If you have multiple buttons that should sit side-by-side on the same line, wrap the buttons in a container that has a
data-inline="true" attribute. This will style the buttons to be the width of their content and float the buttons so they sit on the same line.
<div data-inline="true"> <a href="index.html" data-role="button">Cancel</a> <a href="index.html" data-role="button" data-theme="b">Save</a> </div>
This creates an inline button set:Cancel Save
If you want buttons to sit side-by-side but stretch to fill the width of the screen, you can use the content column grids to put normal full-width buttons into 2- or 3-columns.