"tab2-ionic"
Bootstrap 4.1.1 Snippet by kanikamadaan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ion-content [fullscreen]="true"> <ion-row class="header-row"> <ion-col> <ion-item> <a href="#"> Explore </a> </ion-item> </ion-col> <ion-col> <ion-item> <ion-label class="filter">Filter</ion-label> <ion-select value="filter"> <ion-select-option value="Latest First">Latest First</ion-select-option> <ion-select-option value="Oldest First">Oldest First</ion-select-option> </ion-select> </ion-item> </ion-col> </ion-row> <ion-row> <ion-item [routerLink]="['/tabs/tab3']"> <ion-thumbnail slot="start"> <img src="assets/img/thumb.png"> </ion-thumbnail> <ion-label class="thumb-label"> <h2>Lorem ipsum</h2> <p>dolor sit amet</p> <p>consectetur adipiscing elit. Duis ut urna neque.</p> </ion-label> </ion-item> <ion-item [routerLink]="['/tabs/tab3']"> <ion-thumbnail slot="start"> <img src="assets/img/thumb.png"> </ion-thumbnail> <ion-label class="thumb-label"> <h2>Lorem ipsum</h2> <p>dolor sit amet</p> <p>consectetur adipiscing elit. Duis ut urna neque.</p> </ion-label> </ion-item> <ion-item [routerLink]="['/tabs/tab3']"> <ion-thumbnail slot="start"> <img src="assets/img/thumb.png"> </ion-thumbnail> <ion-label class="thumb-label"> <h2>Lorem ipsum</h2> <p>dolor sit amet</p> <p>consectetur adipiscing elit. Duis ut urna neque.</p> </ion-label> </ion-item> <ion-item [routerLink]="['/tabs/tab3']"> <ion-thumbnail slot="start"> <img src="assets/img/thumb.png"> </ion-thumbnail> <ion-label class="thumb-label"> <h2>Lorem ipsum</h2> <p>dolor sit amet</p> <p>consectetur adipiscing elit. Duis ut urna neque.</p> </ion-label> </ion-item> <ion-item [routerLink]="['/tabs/tab3']"> <ion-thumbnail slot="start"> <img src="assets/img/thumb.png"> </ion-thumbnail> <ion-label class="thumb-label"> <h2>Lorem ipsum</h2> <p>dolor sit amet</p> <p>consectetur adipiscing elit. Duis ut urna neque.</p> </ion-label> </ion-item> </ion-row> </ion-content>
.thumb-label { margin: 10px; }

Related: See More


Questions / Comments: