0

I am very new to Angular and I practice. I want to sort the list-group elements as I draw them horizontally as in the picture. But when you run the horizontal codes in Bootstrap, it looks like the one on the screen. How can I put list-group elements side by side as I drew

Horizontal list-group I want to make it alike

My other codes in app

 citycategories : Category2[] = [

    {cityid:1,cityname:"İstanbul",cityprovince:"Başakşehir"},
    {cityid:2,cityname:"İstanbul",cityprovince:"Kayaşehir"},
    {cityid:2,cityname:"İstanbul",cityprovince:"Halkalı"},
    {cityid:2,cityname:"İstanbul",cityprovince:"Halkalı"},
    

   ]

<ul class="list-group-horizontal" *ngFor="let city of citycategories">
    <li class="list-group-item">{{city.cityname}}</li>
</ul>
Liam
  • 27,717
  • 28
  • 128
  • 190
Tunahan İNCE
  • 3
  • 3
  • Does this answer your question? [How to make a HTML list appear horizontally instead of vertically using CSS only?](https://stackoverflow.com/questions/2145181/how-to-make-a-html-list-appear-horizontally-instead-of-vertically-using-css-only) – Liam Oct 08 '20 at 12:21
  • Also [Bootstrap horizontal stacking of list-group](https://stackoverflow.com/questions/31979850/bootstrap-horizontal-stacking-of-list-group) for a bootstrap solution – Liam Oct 08 '20 at 12:23

1 Answers1

2

I think you are missing the list-group class in your ul tag. Also, you should probably put the ng-for directive on the li tag rather than the ul tag. In you current set up, you will have 4 lists with 1 item each, when I'm guessing you meant to have 1 list with 4 items.

Code:

<ul class="list-group list-group-horizontal">
<li  *ngFor="let city of citycategories" class="list-group-item">{{city.cityname}}</li>
</ul>

Working example

Tarun Sharma
  • 107
  • 9