Making buttons side by side

Ionic Framework
11

Just to add on to the answer by @ChrisGriiffith, you may want to include sizes on the columns as on smaller screens they will wrap:

<ion-grid>
  <ion-row>
    <ion-col size="3">
      <ion-button expand="full" class="ion-text-wrap">Take a Picture</ion-button>
    </ion-col>
    <ion-col size="3">
      <ion-button expand="full" class="ion-text-wrap">Recognize</ion-button>
    </ion-col>
    <ion-col size="3">
      <ion-button expand="full" class="ion-text-wrap">Food Search</ion-button>
    </ion-col>
    <ion-col size="3">
      <ion-button expand="full" class="ion-text-wrap">Selected Meals</ion-button>
    </ion-col>
  </ion-row>
</ion-grid>

I also made the text wrap in the button and removed the grid padding.

Here’s a Codepen: https://codepen.io/brandyscarney/pen/qwMwyq?editors=1100

2 Likes