1

I try to use Cards from Bootstrap to show some information from different stocks in a database. I'm using DJANGO's template engine and already have the code below. On a desktop, after three cards a new row is showed but there is no space between the first and second row. When showed on mobile, all the cards are underneath eachother, but again with no space between. How can I add some extra space between the cards?

<div class="container">
<div class="row">
        {% for security in securities %}
            <div class="col-sm-4">
                <div class="card" style="width: 18rem;">
                  <img src="{% static "public/engie.jpg" %}" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">{{ security.name }}</h5>
                    <p class="card-text">Text here</p>
                  </div>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">{{ security.quote }}</li>
                    <li class="list-group-item">{{ security.lastchange_pct }}</li>
                    <li class="list-group-item">{{ security.remarks }}</li>
                  </ul>
                  <div class="card-body">
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                  </div>
                </div>
            </div>
        {% endfor %}
stefvr
  • 77
  • 7
  • Add a margin (or padding) to your cards (to the
    ). https://stackoverflow.com/a/9183818/3567888
     – zypro Mar 30 '20 at 14:33

1 Answers1

1

Add a margin to your class or create a new class with a margin or write it into the style attribute of the <div style="col-sm-4">.

<div class="container">
<div class="row">
        {% for security in securities %}
            <div class="col-sm-4 card-space">
                <div class="card" style="width: 18rem;">
...

in your css file:

.card-space {
  margin-bottom: 20px; 
}

Or better use the bootstrap spacing classes e.g.

<div class="container">
<div class="row">
        {% for security in securities %}
            <div class="col-sm-4 mb-3">
                <div class="card" style="width: 18rem;">

Also have a look at this solution from @Tim Vermaelen :

zypro
  • 1,098
  • 2
  • 11
  • 32
  • 1
    The spacing classes is the right "Bootstrap way" to follow. `mb-3` Seems more logical than padding because of a plausible background-color. A spacer is imho overkill. We can go on and talk about `card-deck` instead of a row generator with card widths => improved [answer](https://stackoverflow.com/questions/58621609/arrange-multiple-divs-in-css-js/58623480#58623480) but it feels off-topic :) – Tim Vermaelen Mar 30 '20 at 15:28