Icon only, inline centered Buttons in grids

Description

An icon can be set on the button by using the class ui-icon-*. Class ui-btn-inline is used to display the button inline. This means that it will only consume as much space as is needed for the label.

Example

Following example demonstrates the use of icon button grid in the jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   
   <body>
      <h2>Icons Only Inline Center Button Grid Example</h2>
      <div class = "ui-grid-c">
         <div class = "ui-block-a">
            <a class = "ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext 
               ui-btn-inline">Button</a>
         </div>
         
         <div class = "ui-block-b">
            <a class = "ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext 
               ui-btn-inline">Button</a>
         </div>
         
         <div class = "ui-block-b">
            <a class = "ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext 
               ui-btn-inline">Button</a>
         </div>
         
         <div class = "ui-block-e">
            <a class = "ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext 
               ui-btn-inline">Button</a>
         </div>
      </div>
      
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as button_grid_inline_centered.html file in your server root folder.
Open this HTML file as http://localhost/button_grid_inline_centered.html and the following output will be displayed.

jquery_mobile_layouts.htm

Kickstart Your Career

Get certified by completing the course

Get Started