title: How can I achieve below bus seat layout arrangement in Ionic 3?
body: <p><a href="https://i.stack.imgur.com/8Lwaq.jpg" rel="nofollow noreferrer">check this image</a></p>
  <p><strong>I have use this in HTML code</strong>
  Just want to set bus sleeper and seater layout in Ionic 3. load seats with sleeper and seater bus mix seats.
  Just want to set bus sleeper and seater layout in Ionic 3. load seats with sleeper and seater bus mix seats.
  Just want to set bus sleeper and seater layout in Ionic 3. load seats with sleeper and seater bus mix seats.</p>
  <p>here is my HTML code:</p>
  
  <pre><code>        &lt;div text-right&gt;
              &lt;img src=&quot;assets/imgs/ic_steering.png&quot; alt=&quot;&quot; style=&quot;height: 25px; width: 25px;&quot; /&gt;
          &lt;/div&gt;
  
          &lt;div *ngFor=&quot;let rowItem of multiDimArray&quot; no-padding&gt;
  
              &lt;div class=&quot;seatrow container&quot;&gt;
  
                  &lt;div *ngFor=&quot;let colItem of rowItem&quot;&gt;
  
                      &lt;div class=&quot;space&quot; *ngIf=&quot;!colItem  ||(colItem&amp;&amp; colItem.name == '') &quot;&gt; &amp;nbsp; &lt;/div&gt;
  
                      &lt;div *ngIf=&quot;colItem &amp;&amp; colItem.length =='1' &amp;&amp; colItem.width =='1'&quot;&gt;
                          &lt;div *ngIf=&quot;colItem &amp;&amp; colItem.available =='true' &amp;&amp; colItem.name != ''&quot;&gt;
                              &lt;img *ngIf=&quot;colItem.ladiesSeat =='false'&quot; src=&quot;assets/imgs/ic_seater_unselected.png&quot;
                                  alt=&quot;&quot; class=&quot;unspace&quot; /&gt;
  
                              &lt;img *ngIf=&quot;colItem.ladiesSeat =='true'&quot; src=&quot;assets/imgs/ic_seater_women.png&quot; alt=&quot;&quot;
                                  class=&quot;unspace&quot; /&gt;
  
                          &lt;/div&gt;
  
                          &lt;div *ngIf=&quot;colItem &amp;&amp; colItem.available =='false' &amp;&amp; colItem.name != ''&quot;&gt;
                              &lt;img *ngIf=&quot;colItem.ladiesSeat =='false'&quot; src=&quot;assets/imgs/ic_seater_selected.png&quot;
                                  alt=&quot;&quot; class=&quot;unspace&quot; /&gt;
  
  
                              &lt;img *ngIf=&quot;colItem.ladiesSeat =='true'&quot; src=&quot;assets/imgs/ic_women_seater_selected.png&quot;
                                  alt=&quot;&quot; class=&quot;unspace&quot; /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div *ngIf=&quot;colItem &amp;&amp; colItem.length =='2' &amp;&amp; colItem.width =='1'&quot;&gt;
                          &lt;div *ngIf=&quot;colItem &amp;&amp; colItem.available =='true' &amp;&amp; colItem.name != ''&quot;&gt;
                              &lt;img *ngIf=&quot;colItem.ladiesSeat =='false'&quot; src=&quot;assets/imgs/ic_sleeper_unselected.png&quot;
                                  alt=&quot;&quot; class=&quot;unspace&quot; /&gt;
  
                              &lt;img *ngIf=&quot;colItem.ladiesSeat =='true'&quot; src=&quot;assets/imgs/ic_sleeper_women.png&quot; alt=&quot;&quot;
                                  class=&quot;unspace&quot; /&gt;
  
                          &lt;/div&gt;
  
                          &lt;div *ngIf=&quot;colItem &amp;&amp; colItem.available =='false' &amp;&amp; colItem.name != ''&quot;&gt;
                              &lt;img *ngIf=&quot;colItem.ladiesSeat =='false'&quot; src=&quot;assets/imgs/ic_sleeper_selected.png&quot;
                                  alt=&quot;&quot; class=&quot;unspace&quot; /&gt;
  
  
                              &lt;img *ngIf=&quot;colItem.ladiesSeat =='true'&quot; src=&quot;assets/imgs/ic_women_sleeper_selected.png&quot;
                                  alt=&quot;&quot; class=&quot;unspace&quot; /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div *ngIf=&quot;colItem &amp;&amp; colItem.length =='1' &amp;&amp; colItem.width =='2'&quot;&gt;
                          &lt;div *ngIf=&quot;colItem &amp;&amp; colItem.available =='true' &amp;&amp; colItem.name != ''&quot;&gt;
                              &lt;img *ngIf=&quot;colItem.ladiesSeat =='false'&quot; src=&quot;assets/imgs/ic_sleeper_unselected.png&quot;
                                  alt=&quot;&quot; class=&quot;unspace&quot; /&gt;
  
                              &lt;img *ngIf=&quot;colItem.ladiesSeat =='true'&quot; src=&quot;assets/imgs/ic_sleeper_women.png&quot; alt=&quot;&quot;
                                  class=&quot;unspace&quot; /&gt;
  
                          &lt;/div&gt;
  
                          &lt;div *ngIf=&quot;colItem &amp;&amp; colItem.available =='false' &amp;&amp; colItem.name != ''&quot;&gt;
                              &lt;img *ngIf=&quot;colItem.ladiesSeat =='false'&quot; src=&quot;assets/imgs/ic_sleeper_selected.png&quot;
                                  alt=&quot;&quot; class=&quot;unspace&quot; /&gt;
  
  
                              &lt;img *ngIf=&quot;colItem.ladiesSeat =='true'&quot; src=&quot;assets/imgs/ic_women_sleeper_selected.png&quot;
                                  alt=&quot;&quot; class=&quot;unspace&quot; /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
  
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>