Ionic 2 multiple ion-item in a row

Question

I want to show 4 ion-items in my ion-list in a row.

Since I'm using Bootstrap, I tried to do:

<button class="col-sm-3" ion-item *ngFor="let player of players">
    <ion-avatar item-left>
      <img [src]="user.photoURL">
    </ion-avatar>
    {{ user.name }}
  </button>

but it didn't work.

Answer 1

You can manually set the width of each column by using the Explicit Column Percentage Attributes like this:

<ion-row>
    <ion-col width-25>
        <!-- item 1 -->
    </ion-col>
    <ion-col width-25>
        <!-- item 2 -->
    </ion-col>
    <ion-col width-25>
        <!-- item 3 -->
    </ion-col>
    <ion-col width-25>
        <!-- item 4 -->
    </ion-col>
</ion-row>

Or just add ion-col dynamically, and they will expand to fill their row, and will resize to fit additional columns, like this:

<ion-row>
    <ion-col *ngFor="let player of players">
        <ion-item>
            <ion-avatar item-left>
                <img [src]="user.photoURL">
            </ion-avatar>
            {{ user.name }}
        </ion-item>
    </ion-col>
</ion-row>

You can find more information about the Explicit Column Percentage Attributes here.

UPDATE

As of Ionic 3.0.0, the way to achieve the same with the new grid would be something like this:

<ion-row>
    <ion-col col-3>
        <!-- item 1 -->
    </ion-col>
    <ion-col col-3>
        <!-- item 2 -->
    </ion-col>
    <ion-col col-3>
        <!-- item 3 -->
    </ion-col>
    <ion-col col-3>
        <!-- item 4 -->
    </ion-col>
</ion-row>

So the width-25 attribute needs to be replaced by col-3.