How to Display a Bullet List Using Ionic Framework

how to display a bullet list using ionic framework?

Just overwrite the reset.

ol, ul {
  list-style: none;
}

Like this (place in your CSS after the CSS of the framework)

ul {
  list-style-type: disc;
}

Best practise: set a class on the navigation element namely the ul.

<section>    
  <ul class="my-nav">
    <li>List item</li>
    <li>List item</li>
  </ul>
</section>

.my-nav {
  list-style-type: disc;
}

styling list elements not working Ionic

You should to add ul to your style, because modal-list is only container with your list

for example you can do that :

#modal-list ul {
    list-style-type: disc;
}

Create Ionic card List

You could just use a list of ion-items. They provide a round avatar to start the item, followed with a label which you can modify to sample your desired outcome.

<ion-content>
  <ion-list>
    <ion-item *ngFor="your loop here">
      <ion-avatar slot="start">
        <img src="...">
      </ion-avatar>
      <ion-label>
        <ion-grid>
          <ion-row>
            <ion-col size="12">
              <!-- name -->
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="2">
              <!-- icon -->
            </ion-col>
            <ion-col size="10">
              <!-- calender -->
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="2">
              <!-- icon -->
            </ion-col>
            <ion-col size="10">
              <!-- time -->
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

---

Related Topics