Bootstrap images not displayed in a single row - html

Question

I've been trying to create few images that should be displayed in a single row.
Currently it is displayed one-by-one.
Here's my code:
# CSS:
.emblems-section {
z-index: 1;
text-align: center;
}
<header>
<div class="container">
<div class="row">
<div class="col-md-12 emblems-section justify-content-center align-items-center">
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
</div>
</div>
</div>
</div>
</header>

Answer 1

For anyone looking for the same solution, the answer is d-flex within the parent div.

Answer 2

<div class="container">
<div class="row">
<div class="col-md-12 emblems-section justify-content-center align-items-center">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
</div>
</div>
</div>
</div>
</div>
//you have to add row after col-md-12

Answer 3

It is best practice that try to avoid unnecessary div or other elements in code structure. so you don't need to use col-md-12 just replace col-md-12 to row class and remove duplicate row div.
Use below code, by using this you can remove one unrequired div element, so your code looks compressed and beautiful.
<header>
<div class="container">
<div class="row emblems-section justify-content-center align-items-center">
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
</div>
</div>
</div>
</header>

Answer 4

<div class="container">
<div class="row">
<div class="col-md-12 d-flex emblems-section justify-content-center align-items-center">
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/leagueEmblem.png" class="img-fluid" alt="Statistics for League of Legends">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/overwatchEmblem.png" class="img-fluid" alt="Statistics for Overwatch">
</div>
<div class="col-lg-4 col-md-4 col-xs-4">
<img src="img/dotaEmblem.png" class="img-fluid" alt="Statistics for Dota2">
</div>
</div>
</div>
</div>
you can add d-flex class with col-md-12