How can I remove the extra space in cards bootstrap 4

Question

click to see image

So I've been losing my head trying to figure this out. I can't seem to make the cards horizontally centered inside this section and when I checked inspect elements, it turns out the cards are occupying some extra space which isn't really padding or margin. Badly need help on this one. I simply used bootstrap grid and the goal is to get the cards equally centered horizontally.

#products
{
    @include sectionDefaultValues();
    #products-txt-cont
    {
        background-color: $siteColor;
        padding: 15px;
    }
    #products-txt
    {
        color: white;
    }
}

<section id="products">
  <div id="products-txt-cont">
    <h2 id="products-txt">PRODUCTS AND SERVICES</h2>
  </div>
  <div class="container3">
    <div class="row">
      <div class="col col-4">
        <div class="card" style="width: 18rem;" data-toggle="modal" data-target="#modalone">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
          <div class="modal" tabindex="-1" role="dialog" id="modalone">
            <div class="modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                          </button>
                </div>
                <div class="modal-body">
                  <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="col col-4">
        <div class="card" style="width: 18rem;" data-toggle="modal" data-target="#modaltwo">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
          <div class="modal" tabindex="-1" role="dialog" id="modaltwo">
            <div class="modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                </div>
                <div class="modal-body">
                  <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col col-4">
        <div class="card" style="width: 18rem;" data-toggle="modal" data-target="#modalthree">
          <img src="..." class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
          <div class="modal" tabindex="-1" role="dialog" id="modalthree">
            <div class="modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                </div>
                <div class="modal-body">
                  <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Put 'no-gutters' class https://getbootstrap.com/docs/4.4/layout/grid/#no-gutters — kornieff, Dec 07 '19 at 10:39
tried it but still no cigar, the width of the card element itself is bigger than what its supposed to have, tried modifying the width but no effect as well — fael_, Dec 07 '19 at 12:17

score 2 · Accepted Answer · edited Sep 25 '21 at 15:27

2

I FIGURED IT OUT LOL, just had to add mx-auto class to the cards

edited Sep 25 '21 at 15:27

STA

30,729
8
45
59

answered Dec 07 '19 at 12:20

fael_

35
1
8

How can I remove the extra space in cards bootstrap 4

1 Answers1