I am trying to get page containing a slider in the middle and a button in the bottom as shown in this picture:
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:
How can I fix it to get the view in the first picture ?