Bootstrap column class not following margins or container fluid class

Question

I'm using cards to display information on a website. I want the cards to be side by side with each other. I heard that the way to do this is to put each card into a column.

When I do this, all the spacing that I wanted for my 2 cards is gone. The 1st card has no spacing between the left side of the screen and the 2nd card is right against the 1st card. Other elements inside my container-fluid div usually have a bit of margin but the column doesn't.

Code:

<div class="row">
   <div class="card mb-3" style="width: 22rem;">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">Name: User</li>
            <li class="list-group-item">Email: User@email.com</li>
            <li class="list-group-item">
                <label for="exampleInputPassword1" class="form-label">Password: </label>
                <input id="exampleInputPassword1" type="password" disabled value="{{session['password']}}" style="width: 10rem">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"  fill="currentColor" class="bi bi-eye-fill"
                     viewBox="0 0 16 16" style="margin-top:-5px; margin-left: 5px" id="iconUnselected"
                     onmousedown="document.getElementById('iconUnselected').classList.add('d-none');
                              document.getElementById('iconSelected').classList.remove('d-none')
                              document.getElementById('exampleInputPassword1').setAttribute('type', 'text')">
                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                    <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-eye d-none"
                     viewBox="0 0 16 16" id="iconSelected" style="margin-top:-5px; margin-left: 5px"
                     onmouseup="document.getElementById('iconSelected').classList.add('d-none');
                              document.getElementById('iconUnselected').classList.remove('d-none')
                              document.getElementById('exampleInputPassword1').setAttribute('type', 'password')">
                    <path fill-rule="evenodd" d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z"/>
                    <path fill-rule="evenodd" d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                </svg>
            </li>
            <li class="list-group-item">Status: Standard</li>
            <li class="list-group-item">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editInfo">Edit Info</button>
                <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteAccount">Delete Account</button>
            </li>
        </ul>
    </div>
    <div class="card mb-3 col-100" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">About</h5>
        <p class="card-text">Sample About Text</p>
      </div>
    </div>
</div>

Does anyone know how to fix this or better yet find a more effective way of getting the 2 cards next to each other? Thanks

See in this image, the margin is not the same (shown by red arrow). Below, I had a card that obeys the proper margins given by container-fluid but the above cards in the div do not and have no margins. I need this to be exact. Don't add margin to the cards because there are still some discrepancies when zoomed in.

Answer 1

The solution is quite simple. I'll use some older code you wrote since it is easier to work with. Use a row div around all your cards like before:

<div class="container-fluid">
    <div class='row'>
         <div class="card mb-3" style="width: 22rem;">
             <div class="card-body">
                <h5 class="card-title">1st card</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>
              </div>
           </div>
         </div>
         <div class="card mb-3 col-100" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">2nd card</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>
          </div>
        </div>
        </div>
</div>
<div class="card mb-3 col-100" style="width: 18rem;">  
    <div class="card-body">
            <h5 class="card-title">2nd card</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>
          </div>
        </div>
</div>

The difference is that you have to wrap it each card in a column. So do this:

<div class="container-fluid">
 <div class='row'>
    <div class="col-sm-4">
         <div class="card mb-3" style="width: 22rem;">
             <div class="card-body">
                <h5 class="card-title">1st card</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>
              </div>
           </div>
         </div>
        </div>
        <div class="col-sm-4">
         <div class="card mb-3 col-100" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">2nd card</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>
          </div>
        </div>
    </div>
</div>
        </div>
<div class="card mb-3 col-100" style="width: 18rem;">  
    <div class="card-body">
            <h5 class="card-title">2nd card</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>
          </div>
        </div>
</div>

If it doesn't work just yet, you should just change around the number on col-sm-4 so change the 4 to a 5 or something else if it is necessary.

Answer 2

I have added flexbox class in this to add dynamic spacing between cards as you wanted. There are three types of spacing you can include as per your requirement which are:-

• Space-around(justify-content-around): This will leave equal spacing around cards.
• Space-between(justify-content-between): This will leave all space in between cards.
• Space-evenly(justify-content-evenly): This will leave equal spaces in between all cards. my recommendation

Note: For left and right spacing you can add margin by adding class (mx-2), this is optional.

Code:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="d-flex justify-content-evenly">
    <div class="card">
           <div class="card-body">
              <h5 class="card-title">1st card</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>
            </div>
         </div>
       <div class="card">
        <div class="card-body">
          <h5 class="card-title">2nd card</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>
        </div>
      </div>
  </div>
</div>

Answer 3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <link rel="stylesheet" type="text/css" href="bootstrap.css">
        <title>
        </title>
    </head>
    <body>
        <div class="container-fluid">
            <div class='row'>
                <div class="card mb-3 ml-3 mr-1" style="width: 22rem;">
                    <div class="card-body">
                        <h5 class="card-title">1st card</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>
                    </div>
                </div>
                <div class="card mb-3 ml-3" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">2nd card</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>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 4

My code is bellow. It worked.

<div class="container-fluid">
    <div class='row'>
        <div class="card mb-3 mx-3" style="width: 22rem;">
            <div class="card-body">
                <h5 class="card-title">1st card</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>
            </div>
        </div>
        <div class="card mb-3" style="width: 18rem;">
            <div class="card-body">
                <h5 class="card-title">2nd card</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>
            </div>
        </div>
    </div>
</div>

Answer 5

Add row class after container-fluid

<div class="container-fluid">
  <div class="row">
    <div class="card mb-3" style="width: 22rem;">
           <div class="card-body">
              <h5 class="card-title">1st card</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>
            </div>
         </div>
       <div class="card mb-3 col-100" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">2nd card</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>
        </div>
      </div>
  </div>
</div>

https://jsfiddle.net/lalji1051/49u10jLo/1/