Ionic grid bottom Error

ionic-v1
1

I am trying to get page containing a slider in the middle and a button in the bottom as shown in this picture:

enter image description here

So, I chose to use the Ionic grid since I thought it will be fast to do it. I wrote thee following code:

  <body ng-app="starter">

<ion-pane>
  <ion-header-bar class="bar-stable bar-positive">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content class="background" scroll="false">
    <div class="row row-center">
        <ion-slide-box on-slide-changed="slideHasChanged($index)" class="col col-80 col-offset-10">
          <ion-slide>
            <div class="text-center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
            tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
            enim ad minim veniam, quis nostrud</div>
          </ion-slide>
          <ion-slide>
            <div class="light text-center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
            tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
            enim ad minim veniam, quis nostrud</div>
          </ion-slide>
          <ion-slide>
            <div class="light text-center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
            tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
            enim ad minim veniam, quis nostrud</div>
            <br><br><br>
          </ion-slide>
       </ion-slide-box>
    </div>
    <div class="row row-bottom">
      <button class="button button-full button-positive button-large button-skip">Click</button>
    </div>
  </ion-content>
</ion-pane>

Unfortunately, I got this result:

enter image description here

How can I fix it to get the view in the first picture ?