CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Samer
Samer

Reputation: 133

How to add gaps between the bootstrap cards

I am new to Bootstrap. I am trying to add images as cards. But I face some issues as the cards are stacking up one after the other without spaces. Below is the code with Bootstrap4.

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
            <a href="#" class="">
                Beautiful
                <img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
            <a href="#">
                Beautiful
                <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
            <a href="#" class="">
                Beautiful
                <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
            <a href="#">
                Beautiful
                <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
            <a href="#" class="">
                Beautiful
                <img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
            <a href="#">
                Beautiful
                <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
            </a>
        </div>
    </div>
</div>

With the above code in screen cards are stacked one after other without space.

enter image description here

I tried with mr-1 but the 4th card is wrapping it into another row.

enter image description here

How can I add spaces between cards with evenly spaced above and below?

Upvotes: 0

Views: 815

Answers (2)

Arleigh Hix
Arleigh Hix

Reputation: 10897

This is because you are using .col-* and .card on the same element. Try to be in the habit of putting your content elements inside your layout grid elements.

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#" class="">
          Beautiful
          <img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#">
          Beautiful
          <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#" class="">
          Beautiful
          <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#">
          Beautiful
          <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#" class="">
          Beautiful
          <img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
        </a>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="card m-1">
        <a href="#">
          Beautiful
          <img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
        </a>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Albert
Albert

Reputation: 34

I solved this problem using Bootstrap 4 Emdeds Utilities

https://getbootstrap.com/docs/4.3/utilities/embed

In this case you just need to add you image to a div.embbed-responsive like this:

<div class="card"><div class="embed-responsive embed-responsive-16by9"> <img alt="Card image cap" class="card-img-top embed-responsive-item" src="img/butterPecan.jpg" /></div><div class="card-block"><h4 class="card-title">Butter Pecan</h4><p class="card-text">Roasted pecans, butter and vanilla come together to make this wonderful ice cream</p></div></div>

or .card-img-top {width: 100%;}

Upvotes: 0

Related Questions