Share the post

Hello All, Today we will see the Ionic V4 basic design concepts related to the grid. In this topic, We will see How to use the grid in an Ionic V4 mobile application? & also How to implement a grid in Ionic V4 mobile application? How to use header & footer in ionic V4? Is the different color option available in ionic V4? 

Ionic Grid :

The common syntax for the Ionic grid is shown below :



<ion-col size="3">

col 1



col 2




Inside a main grid tag there are two more tags. One is <ion-row></ion-row> & inside ion-row <ion-col></ion-col>.<ion-row> & <ion-col> tags are the same like as we have seen in common HTML there is a <tr> & <td> tags.

<ion-row> is used to show a row inside a grid. Remember that the default column is 12 inside a single <ion-row>.In the above example, two-column created under a single row. We have specified the column size is equal to 3, then automatically second-row assign the column size as 12 – 3 = 9.

The standard responsive grid size is as shown below  :

  • Small Screen: size-sm
  • Extra Small Screen: size-xs
  • Medium  : size-md
  • Large: size-lg
  • Extra Large : size-xl

Header in Ionic :

Displays at the top of the page. is used to add header in-app without toolbar ion-header will not be visible. Remember to add a header before the ion-content tag.

Footer in Ionic : 

Same as header just change ion-header to ion-footer. You can see the footer at the bottom of the page. Remember add-footer after the ion-content tag.

Different color options in Ionic :

Ionic offers 8 different colors :

  1. primary  
  2. secondary
  3. tertiary 
  4. success
  5. warning  
  6. danger
  7. light    
  8. dark

The default color of the header bar is light. You can change it

<ion-toolbar color="primary"> </ion-toolbar>

The example for header & footer tag is as shown below :

<ion-header [translucent]="true">
      Title inside header tag

<ion-content [fullscreen]="true">

  <div id="container">


  This is footer

The output is as shown below : 



Leave a Comment