Customizing Ionic Checkbox

Hello there,

By default the checkbox and label each comes in one single row (100% width of the screen for one label and checkbox). Then second comes in next line.

But I a want to take 3 check boxes in one single row. Example:- [ ] Blue [ ] Green [ ] Red.

Can anyone please help me out, how to change the alignment?
Thank you in advance.

Hey Amrita,
Use div row and col class for making them inline

Thanks Rahul for your reply.
I had tried previously the with row and col. The below code:

<div class="row">
  <div class="col"><ion-checkbox ng-model="">Red</ion-checkbox></div>
  <div class="col"><ion-checkbox ng-model="filter.yellow">Yellow</ion-checkbox></div>
  <div class="col"> <ion-checkbox ng-model="">Pink</ion-checkbox></div>

But still it doesn’t work. Do I need to change the CSS? If so, I am worried about multiple screen output.


remove both ion-list and instead of col , use col-33