Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0 
          <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search