Making buttons side by side

Ionic Framework
1

Hello, I am a student and I’m trying to make a project. For my project, i have to make 4 buttons at the top of the page, but i cant do that. Can anyone help me? It has to look like this:

Ekran%20G%C3%B6r%C3%BCnt%C3%BCs%C3%BC%20(17)
Ekran Görüntüsü (17).png1920×1080 107 KB

2

<ion-grid>
<ion-row>
<ion-col col-3>
<button ion-button style=“width: 100% !important”> Button 1 </button>
</ion-col>
<ion-col col-3>
<button ion-button style=“width: 100% !important”> Button 2 </button>
</ion-col>
<ion-col col-3>
<button ion-button style=“width: 100% !important”> Button 3 </button>
</ion-col>
<ion-col col-3>
<button ion-button style=“width: 100% !important”> Button 4 </button>
</ion-col>
</ion-row>
</ion-grid>

3

Thanks, it worked like magic! But now the buttons are too small, what should i do about that?

Ekran%20G%C3%B6r%C3%BCnt%C3%BCs%C3%BC%20(18)
Ekran Görüntüsü (18).png1920×1080 33.3 KB

4

<ion-grid>
<ion-row>
<ion-col col-3>
<button ion-button style=“width: 100% !important”> Button 1 </button>
</ion-col>
<ion-col col-3>
<button ion-button style=“width: 100% !important”> Button 2 </button>
</ion-col>
<ion-col col-3>
<button ion-button style=“width: 100% !important”> Button 3 </button>
</ion-col>
<ion-col col-3>
<button ion-button style=“width: 100% !important”> Button 4 </button>
</ion-col>
</ion-row>
</ion-grid>

5

thanks again, but it did not worked for me. I gave the values, what might be the reason that it did not worked?

6

Check it on Mobile View… not in webview and add the styles what you like…

7

I think i couldn’t define it in css, can you show me how it’s done?

8

Although the tag ionic-3 is applied to the post, I suspect you might actually be using Ionic 4. Here is the markup to do what you want in Ionic 4:

  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-button expand="full">Full Button</ion-button>
      </ion-col>
      <ion-col>
        <ion-button expand="full">Full Button</ion-button>
      </ion-col>
      <ion-col>
        <ion-button expand="full">Full Button</ion-button>
      </ion-col>
      <ion-col>
        <ion-button expand="full">Full Button</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

and for Ionic 3:

  <ion-grid>
    <ion-row>
      <ion-col><button ion-button full>Full Button</button></ion-col>
      <ion-col><button ion-button full>Full Button</button></ion-col>
      <ion-col><button ion-button full>Full Button</button></ion-col>
      <ion-col><button ion-button full>Full Button</button></ion-col>
    </ion-row>
  </ion-grid>
1 Like
10

Thank you so much! It worked, i did not even realized that i tagged it!

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