Search code examples
ionic4

What is the different usage in the default Ionic CSS vs Bootstrap in the Ionic 4 version?


If we use bootstrap in ionic 4 version. ionic CSS would affect or not?. I want use bootstrap. Any suggestion have?


Solution

  • It's according to the place its used in, for example if you the ion-grid view and put for ion-col an atteibute size for example equal to 6 then its making the view devided by 12 and in bootstrap it makes the same by class col-6 ,so if you use both size of ionic and class of bootstrap ,the bootstrap will take the effect and not the size.

    Example: Using ionic design:

    <ion-grid>
      <ion-col size="6">
          ....
      </ion-col>
    </ion-grid>
    

    Using bootstrap design with ionic design:

      <ion-grid>
          <ion-col size="6" class="col-6">
              ....
          </ion-col>
        </ion-grid>
    

    Using bootstrap design:

    <ion-grid>
      <div class="row">
        <div class="col-6">
          ....
        </div>
      </div>
    </ion-grid>
    

    So here the bootstrap will overrite ionic attribute size.So according to what you want or where to use it the answer may switch. But if you take performance into considration,it's better to use default ionic design than using and external bootstrap themeing.