How could I change the appearance of the HTML view? - html

Question

Consider the below Angular 2 Template code :
<div *ngIf="artist">
<header class="artist-header">
<div *ngIf="artist.images.length > 0">
<img class="artist-thumb img-circle" src="{{artist.images[0].url}}">
</div>
<h1>{{artist.name}}</h1>
<p *ngIf="artist.genres.length > 0">
Genres : <span *ngFor="let genre of artist.genres">{{genre}}</span>
</p>
</header>
<div class="artist-albums">
<div class="row">
<div class="col-md-3" *ngFor="let album of albums">
<div class="card bg-faded card-body album">
<div *ngIf="album.images.length > 0">
<img class="album-thumb img-thumbnail" src="{{album.images[0].url}}">
<h4>{{album.name}}</h4>
<a class="btn btn-default btn-block" routerLink="/album/{{album.id}}">Album Details</a>
</div>
</div>
</div>
</div>
</div>
</div>
In spite of applying class="col-md-3", all divs are appearing in a new line vertically. Below is the image shown. I want that 3 div should appear horizontally in one line. What's need to be changed within the above code?

Answer 1

If the whole code you posted is looped to display all these images, each of the col-md-3 is in a seperate row div, which creates a linebreak each time. So try to make the loop inside that row div, only for the col-md-3 elements.

Answer 2

Add the other bootstrap options to the div:
col-lg-3 col-md-3 col-sm-3 col-xs-3
Be sure that you do not have any margins or haven't override the default width from bootstrap using "!important" flag.
Try to see the live CSS using "inspect element" option in your browser and try to change the data there so you can figure out what is going on.