How to evenly spread 's across a page?

I have 3 ion-cols below, with an ion-button in each.

As you can see from the image, they are not evenly spread across the screen:

Here is my current HTML:

    <ion-row class="bottom-bar">
      <ion-col>
        <ion-button fill="clear" size="small" color="danger" class="border-right">
          <ion-icon slot="start" name="thumbs-up"></ion-icon>
          <small>12</small>
        </ion-button>
      </ion-col>
      <ion-col>
        <ion-button fill="clear" size="small" color="danger" class="border-right">
          <ion-icon slot="start" name="text"></ion-icon>
          <small>12 Comments</small>
        </ion-button>
      </ion-col>
      <ion-col>
        <ion-button fill="clear" size="small" color="danger">
            <small>12 minutes ago</small>
        </ion-button>
      </ion-col>
    </ion-row>

In order to spread the buttons across the page evenly, I tried to add expand="full" to each ion-button, but that doesn’t change anything.

Can someone please tell me what changes are required for this?