How do I add spacing between rows of a card-deck in bootstrap

Question

I fixed the size of each columns so that there's always 4 deck-items per row and the card-deck automatically goes to the next row whenever there is more than 4 deck-items in the row. But the spacing between two rows are very small and it looks like as if they are overlapping. As I am new to bootstrap I cant figure out how to add spacing between them. I tried to use margin but it didnt worked.
This is my code for card-deck

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

dns_nx · Answer 1 · 2019-11-20T14:47:30.220

You can just add some margin to col-sm-3. Then you can define the space between them:

.col-sm-3 {
  /*enter the space here:*/
  margin-top:20px;
}

or create an own class, if you do not want to modify the class for the whole project, where you define the space:

.someClass {
  /*enter the space here:*/
  margin-top:20px;
}

...
<div class="col-sm-3 someClass">
...

Have a look at this fiddle: https://jsfiddle.net/zdra058w/

brooksrelyt · Accepted Answer · 2019-11-20T14:53:15.983

You can override the main Bootstrap styles (don't edit the actual source code) so that each card has a margin bottom or top.

.card {
    margin-bottom: 1em;
}

Creating your own style is fine too but, I would not edit the col-sm-3 because that would be a universal project change and you can run into issues later on.

Additionally, if you want to use another built in spacing utility from bootstrap try editing the html with:

.mb-1, .mb-2, ... , .mb-5 (same works for padding). All you have to do is choose a spacing property (m or p for margin or padding), choose a side/direction (t or b for top or bottom), and the size (1-5 and auto).

Docs: https://getbootstrap.com/docs/4.3/utilities/spacing/

HTML example (adding mb-4 to your card):

<div class="card-deck">
    @foreach ($animes as $anime)
        <div class="col-sm-3">
        <div class="card h-100 mb-4">
            <img class="card-img-top" src="/storage/cover_images/{{$anime->cover_image}}" alt="{{$anime->name}}">
            <div class="card-body">
                <p class="card-text text-center"> <strong>{{$anime->name}}</strong></p>
            </div>
            <a class="card-footer btn btn-primary bg-primary" href="/shows/{{$anime->id}}"> Explore </a>
        </div>
        </div>
    @endforeach
</div>

This will add a margin to the bottom of your card. I personally use margin bottom but it's up to you.

It works only when i remove the fixed height "h-100", but I need every card to have same height. — Amanur Rahman, Nov 21 '19 at 13:26
It works now!!! using margin-bottom class with col-sm-3 solves the problem... — Amanur Rahman, Nov 21 '19 at 13:31

Tim Vermaelen · Answer 3 · 2019-11-20T16:07:05.917

You should simply use the Spacing Utilities as provided by Bootstrap. Margin-Bottom-3

@foreach ($animes as $anime)
    <div class="card mb-3">
    </div>
@endforeach

Also the use of .col inside a card-deck is counter-intuitive. See my previous answer to override the flex-basis if you want to tackle columns. The .h-100 can be eliminated as well with this approach since card-decks are an alternative for the legendary "equal heights".

DEMO

How do I add spacing between rows of a card-deck in bootstrap

3 Answers3

Linked