CODEWITHSUNDEEP
htmlbootstrap-5justify
Mushy
Mushy

Reputation: 11

Bootstrap-5 justify-content not adding space between or anything justify

Trying to space out 3 images with space around or space between depending on what I like. For some reason, the images stay stuck together in the center instead of justify-content-around. I tried taking and changing the img width thinking that maybe you couldn't justify a img-fluid.

 <div class="container">
  <div class="d-flex flex-row justify-content-end my-5">
    <div class="border border-2 px-2">
      <img class="img-fluid px-4" src="girl.jpg" alt="">
    </div>
    <div class="border border-2 px-2">
      <img class="img-fluid px-4" src="girl.jpg" alt="">
    </div>
    <div class="border border-2 px-2">
      <img class="img-fluid px-4" src="girl.jpg" alt="">
    </div>
  </div>
</div>

Upvotes: 0

Views: 40

Answers (2)

Sunny Raj
Sunny Raj

Reputation: 1

      <div class="container-fluid">
        <div class="container my-5">
            <div class="d-flex justify-content-evenly  border p-3">
              <div class="">
                <img class="img-fluid " src="https://images.unsplash.com/photo-1607798748738-b15c40d33d57?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="300px"  alt="">
              </div>
              <div class="">
                <img class="img-fluid " src="https://images.unsplash.com/photo-1607798748738-b15c40d33d57?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="300px" alt="">
              </div>
              <div class="">
                <img class="img-fluid " src="https://images.unsplash.com/photo-1607798748738-b15c40d33d57?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="300px" alt="">
              </div>
            </div>
          </div> 
    </div>

Upvotes: 0

Muhammad Aleem
Muhammad Aleem

Reputation: 74

You need to use justify-content-between to add space between the images. If the images size is big and space doesn't appear then try to adjust width and height of each image. Also try to use Bootstrap class gap i.e., gap-3.

Read more about Flex here.

Upvotes: 0

Related Questions