In jquery mobile footer Class="ui-bar" not working,button are not arranged to the left?

<div data-role="page" id="tool" data-theme="e" >
       <div data-role="header" data-position="fixed">
          <span class="ui-title"></span>
           <a href="#" data-role="button" data-rel="back" data-back-btn-text="previous" class="ui-btn-right" data-icon="back">Back</a>
           <a href="#home" data-role="button" class="ui-btn-left" data-icon="home">Home</a>  
          
       </div>
   
    <div data-role="content">
         Here goes to  content
       </div>
   
    <div data-role="footer" class="ui-bar-b" data-position="fixed"  >
       
       <a href="#" data-role="button" data-icon="check">save</a>  
        <a href="#" data-role="button" data-icon="gear">Option</a>
        <a href="#" data-role="button" data-icon="delete">Remove</a>  
        
       
       </div>
    </div>

• Topic Participants

• jqueryapps

• jtara-jquery