CODEWITHSUNDEEP
htmlcssbootstrap-5
Joints
Joints

Reputation: 21

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>

Upvotes: 0

Views: 313

Answers (4)

Jignesh Panchal
Jignesh Panchal

Reputation: 1376

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>

Upvotes: 1

Pinal Sukhadiya
Pinal Sukhadiya

Reputation: 251

<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

Upvotes: 0

Pinal Sukhadiya
Pinal Sukhadiya

Reputation: 251

<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

Upvotes: 1

Joints
Joints

Reputation: 21

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

Upvotes: 1

Related Questions