'Bootstrap images not displayed in a single row

I've been trying to create few images that should be displayed in a single row. Currently it is displayed one-by-one.

Example

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>
htmlcssbootstrap-5


Solution 1:[1]

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

Solution 2:[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

Solution 3:[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>

Solution 4:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Joints
Solution 2
Solution 3
Solution 4 Pinal Sukhadiya

Related Questions