I've created a couple of sample product. Right now I able to display it just fine, but somehow the product is shown vertically. I would like it to appear horizontally once it max out the floating space next thumbnail can move onto the next line.

I've created a floating container and put my \*ngfor inside it. Anything that I'm missing?

Here is my html code,

```
<div class="text-center m-t-lg">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">

  <h1>Public Shared Diary</h1>

  <div class="container-fluid">

  <div *ngFor="let pub_diary of diaries_temp;let i = index" [attr.data-index]="i">

    <div class="container-fluid">
      <div class="thumbnail" style="min-height:320px;height:320px;min-width:220px;width:220px;">
        <h2>Project title = {{pub_diary.project_name}}</h2>
        <img style="min-height:150px;height:150px;" src="{{pub_diary.project_image}}">
      </div>
    </div>

  </div>
  </div>

</div>

```

and here is the current output. The red marking is where I would like the thumbnail to be.

[![enter image description here](https://i.stack.imgur.com/nQykO.png)](https://i.stack.imgur.com/nQykO.png)