What is the best way to eliminate additional spacing within Bootstrap 4 cards?

I'm really struggling to figure this out. The cards in this section are not centered horizontally, even though I used bootstrap grid. They seem to be taking up extra space that isn't padding or margin-related. Any advice on how to fix this issue would be greatly appreciated!

#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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="48382738382d3a66223b087966797e6678">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

htmlcsssassbootstrap-4bootstrap-cards

Answer №1

After some tinkering, I finally cracked the code! All it took was adding the mx-auto class to the cards.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery: Trouble with executing the Ajax request

I am working with Jquery to track the number of clicks and keypresses by users. $(document).ready(function(){ var countClick = 0; var keyClick = 0; $("body").mousedown(function(){ countClick ++; }); $("body").keypre ...

javascriptjqueryhtmlajax

Getting the entire data block in ReactJS: A step-by-step guide

I have encountered an issue with a component I created that only displays the value of block[0], rather than showing the entire block value. For instance, if I input: HI Stackoverflow It only shows "HI" and not the complete content of the field. Is th ...

javascripthtmlreactjs

JavaScript and jQuery code: Trigger the vjs-fade-out class to toggle when the userActive value in video.js changes

I am currently utilizing video.js to develop a player that is compatible with various devices. One crucial feature I have included is a custom "return to menu" button located in the top right corner of the video player. The challenge I am facing is dynamic ...

javascriptjquerycssvideovideo.js

What are the steps to connecting incoming data to an Angular view utilizing a reactive form?

Hello, I am currently fetching data from an API and have successfully displayed the teacher values. However, I am unsure of how to utilize the incoming array values for "COURSES" in my Angular view. This is the response from the REST API: { "courses ...

htmlarraysangulartypescript

"Customized Bootstrap button featuring a tooltip and modal, experiencing incorrect padding within the button group design

I encountered an issue with a button-group containing 2 buttons, each with a tooltip and a modal. Bootstrap recommends wrapping the buttons with spans to manage two "data-bs-toggle" attributes, which is what I initially did. While the functionality works ...

htmlcssbuttonbootstrap-5

WebDriverException: Error: {"errorMessage":"The object is undefined"

I encountered an error while running the code on this HTML page, specifically at /html/body/div[3]/div[1]/div[1]/div[1]/div/div[10]/a/div[1]/div[2]: WebDriverException: Message: {"errorMessage":"null is not an object (near '...ull).singleNodeVa ...

pythonhtmlseleniumphantomjs

tcpdf - bug causing incorrect indentation following a line break

Are you familiar with how to adjust text alignment after a line break using tcpdf? With tcpdf 6.2.13 and the writeHTML method, I am attempting to achieve perfectly left-aligned text. However, whenever the line is too long, the following line gets shifted ...

htmlcsstcpdf

Expand the range of input movement using a unique and oversized custom thumb graphic

In my project, I am creating a personalized input range feature by utilizing a 40px x 80px image as the background for the thumb. Typically, the thumb is limited to moving within the length of the track from edge to edge. However, I am aiming for the thu ...

htmlcss

Guide on how to dynamically add AJAX JSON array response to an HTML table

Hey! I need some advice on how to dynamically append a JSON Array response to an HTML table after submitting a form using AJAX. Here's the scenario: This is my form : <form id="myForm" method="POST"> <input type=" ...

javascripthtmlajax

How can I utilize the Facebook API on Tizen to share a video?

Could someone please provide guidance on how to incorporate video uploading functionality into a Tizen application using the Facebook API and HTML5? ...

javascriptfacebookhtmlfacebook-graph-apitizen

Update the content inside the extension by modifying its innerHTML

Just starting out with JavaScript, I'm attempting to create a basic extension that can generate a random number. document.getElementById("submit").onclick = function() { a = document.getElementById("in1").value; b = document.getElementById("in2 ...

javascripthtmljsongoogle-chrome-extensioninnerhtml

Could this method of utilizing GET be considered incorrect?

I've been tackling a project and encountered an issue that I was only able to resolve by using the following code snippet: header("Location:messages.php?ID_Conversation=$row[ID]"); Do you think this approach is incorrect? ...

phphtmlsqlget

Having issues with jQuery's .fadeIn function not functioning properly

Currently, I'm developing a website and I am aiming to achieve a specific effect where a text fades in every time the webpage is opened. To achieve this, I have implemented the following code snippet: $(document).ready(function() { $('#title ...

jqueryhtmlwebfadein

"Enhance your website with Ajax code that enables automatic refreshing of a PHP file, keeping its values up-to-date

Before diving in, I want to make it clear that my understanding of ajax is limited. I'm currently working on a small application where I have a load.php file that echoes 3 variables: $loadout[0]; $loadout[1]; $loadout[2]; The PHP file is functioning p ...

javascriptphpjqueryhtmlajax

Ways to identify if a resize event was caused by the soft keyboard in a mobile browser

Many have debated the soft keyboard, but I am still searching for a suitable solution to my issue. I currently have a resize function like: $(window).resize(function() { ///do stuff }); My goal is to execute the 'stuff' in that function on ...

javascriptjqueryhtmlmobilebrowser

Ways to turn off the adaptive transient feature

Is there a way to turn off the responsive features and grid layout of Bootstrap? While creating a website for a company, I ensured that it was responsive for mobile devices. However, the company now wants a different design specifically for mobile, with t ...

htmlcssbootstrap-4

I'm trying to understand why the combination of boostrap 5 mx-auto d-block is not effectively centering a fluid image. Can anyone

My code seems to be very simple, yet I am puzzled as to why it is not working. I have removed any external CSS from the page that could potentially cause interference, but the image still refuses to center inside my column. I have searched extensively and ...

htmlbootstrap-5

Using the <a href> tag to send emails directly from within an HTML document

I am working on creating a basic HTML page using a free web template I found online. In the "contact" section, I want to configure it so that <a href= "mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92fff7d2f5fff3fbf ...

htmlcssemail

Adjusting the color of text based on the fulfillment of a condition

Is there a way to change the text color of a variable based on its value in PHP? For example, if the $status is set to admin, can we display it in red when echoed out using <h3>Status: <?php echo $status; ?></h3>? I'm not quite sure ...

phphtmlcss

Leveraging the jQuery method .stop() to halt solely the .fadeTo() animation

My webpage features two jQuery effects applied to a <div>. Using the animate() function, I move it left and right, while utilizing fadeTo() to fade it out when the mouse is not hovering over the <div>. To prevent multiple fading effects caused ...

javascriptjqueryhtmlcss