Bootstrap cards underneath each other but the distance between them is way too big-CodePudding

I'm building a quite simple webpage and it has 6 of those Bootstrap cards, 3 in a row and then it should have 3 below that. For some reason it puts an enormous gap between the first 2 cards, but not on the third one.

Here is how it looks right now (I've zoomed out so all cards are visible): https://imgur.com/FPBvYN2

and here is my code for the cards:

<div class="col-md-4">
            <div class="card w-100" style="width: 32rem; height: auto;">
                <img class="card-img-top" src="images/duurzaamheid/zuivering.png" alt="Card image cap">
                <br><br>
                <div class="card-body">
                  <h5 class="card-title" style="font-weight: bold; font-size: 22px;">Water zuivering</h5>
                  <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
                     <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
                </div>
              </div>
        </div>

        <div class="col-md-4">
            <div class="card" style="width: 32rem; height: auto;">
                <img class="card-img-top" src="images/duurzaamheid/recycle.png" alt="Card image cap">
                <br><br>
                <div class="card-body">
                  <h5 class="card-title" style="font-weight: bold; font-size: 22px;">Recyclen van restafval</h5>
                  <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
                    <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->  
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card" style="width: 32rem;">
                <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
                <br><br>
                <div class="card-body">
                  <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX XXXXX</h5>
                  <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
                    <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
                    </p>
                </div>
              </div>
        </div>




        
        <div class="col-md-4">
            <div class="card" style="width: 32rem;">
                <br>
                <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
                <br><br>
                <div class="card-body">
                  <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 11111</h5>
                  <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
                    <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
                    </p>
                </div>
              </div>
        </div>
        
        <div class="col-md-4">
            <div class="card" style="width: 32rem;">
                <br>
                <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
                <br><br>
                <div class="card-body">
                  <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 22222</h5>
                  <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
                    <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
                    </p>
                </div>
              </div>
        </div>

        

        <div class="col-md-4">
            <div class="card" style="width: 32rem;">
                <br>
                <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
                <br><br>
                <div class="card-body">
                  <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 33333</h5>
                  <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
                     <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->
                </div>
              </div>
        </div>

CodePudding user response：

It might be because you're applying additional CSS. In Bootstrap you very rarely have to add any CSS when it comes to widths, paddings or margins. This can all be done in your HTML.

To start with, pretty much remove all CSS including width and height and see what it looks like. You might also find it handy to put your first 3 boxes inside a <div > then a second Row for the next 3 boxes and so on.

CodePudding user response：

Assuming you're wrapping all the code you pasted here inside a

<div class="row">
    <!-- your cards here -->
</div>

you need to remove your inline styles. That includes both your width: 32rem and your height: auto (which you for some reason only have on some of your cards?

When you use the row/col logic from bootstrap you should not declare the width, as that is supposed to b 4/12 of your grid. Defining a width will break that.

I would furthermore advise you to place that type of code (height, width etc.) into a .css file, so you can change the values in one place instead of doing it on every card.

CodePudding user response：

You commented out your closing <p> tag here:

<p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis
                     <!-- enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p> -->

This looks right after I removed the errant w-100 which conflicted with your width: 32rem inline style (I removed all of those). I also added the obligatory .container and .row divs which I assume you just didn't include in your question.

See the snippet below:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="images/duurzaamheid/zuivering.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">Water zuivering</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis
          </p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="images/duurzaamheid/recycle.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">Recyclen van restafval</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis
          </p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card">
        <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX XXXXX</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis
          </p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card">
        <br>
        <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 11111</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis
          </p>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="card">
        <br>
        <img class="card-img-top" src="images/duurzaamheid/blauw.png" alt="Card image cap">
        <br><br>
        <div class="card-body">
          <h5 class="card-title" style="font-weight: bold; font-size: 22px;">XXXXX XXXXX 22222</h5>
          <p class="card-text" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>