How can I put space between Bootstrap cards when they stack for mobile?

Question

I have some blocks, which look fine in desktop view, but on mobile, there is absolutely no space between them.

How can I force the padding?

Thanks

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="col-12 col-sm-4 col-lg-2">
  <div class="card">
    <div class="card-body">
      <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
        <span><font size=4>{{ x.id }}</font></span>
      </div>
      
      Not yet started!
      <div class="progress sh-3">
      
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-body">
      <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
        <span><font size=4>{{ x.id }}</font></span>
      </div>
      
      Not yet started!
      <div class="progress sh-3">
      
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-body">
      <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
        <span><font size=4>{{ x.id }}</font></span>
      </div>
      
      Not yet started!
      <div class="progress sh-3">
      
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
      </div>
    </div>
  </div>
</div>

Please post HTML, not template code. Put it in a functional snippet along with a CDN link to the stylesheet. It's much easier to debug a proper demo than images. And tag your Bootstrap version. — isherwood, Dec 08 '21 at 15:05
Does this answer your question? [Bootstrap 4, add space between two card decks](https://stackoverflow.com/questions/43189710/bootstrap-4-add-space-between-two-card-decks) — isherwood, Dec 08 '21 at 15:19

score 2 · Accepted Answer · answered Dec 08 '21 at 15:25

Generally, you can use the Boostrap spacing utilities. For responsive, you could try mb-md-0 mb-2. This should apply margin to the bottom of the cards when the viewport is small (and no margin otherwise).

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="col-12 col-sm-4 col-lg-2">
  <div class="card mb-2 mb-md-0">
    <div class="card-body">
      <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
        <span><font size=4>{{ x.id }}</font></span>
      </div>
      
      Not yet started!
      <div class="progress sh-3">
      
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
      </div>
    </div>
  </div>
  
  <div class="card mb-2 mb-md-0">
    <div class="card-body">
      <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
        <span><font size=4>{{ x.id }}</font></span>
      </div>
      
      Not yet started!
      <div class="progress sh-3">
      
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
      </div>
    </div>
  </div>
  
  <div class="card mb-2 mb-md-0">
    <div class="card-body">
      <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
        <span><font size=4>{{ x.id }}</font></span>
      </div>
      
      Not yet started!
      <div class="progress sh-3">
      
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
      </div>
    </div>
  </div>
</div>

you're a genius - thank you! – kikee1222 Dec 08 '21 at 19:02 — kikee1222, Dec 08 '21 at 19:02

Mark Carpenter Jr · Answer 2 · 2021-12-08T15:14:39.380

-1

Use a css media query;

@media (max-width: 800) { 
  padding-bottom: 5px;
}

With no example code, it's hard to give relatable examples, but you can use this with SASS and just in any of your style overrides.

here's a pretty good previous question that should help you.

edited Dec 08 '21 at 15:14

answered Dec 08 '21 at 15:11

Mark Carpenter Jr

812
1
16
32

Bootstrap has classes for spacing. No need for custom CSS. – isherwood Dec 08 '21 at 15:12
True bootstrap has worked hard over the years to grow its coverage of utility layout classes, but it's not absurd to think that the end-user might extend them in some way or at least know-how. – Mark Carpenter Jr Dec 08 '21 at 16:27
It _is_ absurd if you're duplicating code in your project, adding complexity and wasting resources. The question was specific to Bootstrap, not adding padding for particular screen sizes. – isherwood Dec 08 '21 at 16:28
I don't see how extending bootstrap's existing breakpoints or adjusting the padding in them to fit your need is creating duplicate code. – Mark Carpenter Jr Dec 08 '21 at 16:32
The question makes no mention of alternative breakpoints. You pulled that out of thin air. Media queries are well covered on SO. They're not relevant here. – isherwood Dec 08 '21 at 16:34
It makes mention of desktop looking correct and mobile not looking as expected "I have some blocks, which look fine in desktop view, but on mobile, there is absolutely no space between them." - OP. Why wouldn't you use a media query or extend an existing one to meet the requirement? I mean the utility classes are using media queries themselves are they not? Why not extend one of those to get more case coverage? – Mark Carpenter Jr Dec 08 '21 at 16:41

isherwood · Answer 3 · 2021-12-08T15:18:15.057

Any reason you aren't just adding vertical margin to the cards? Padding isn't the right tool for the job.

You can specify breakpoints if you like, so it's only applied on mobile. See https://getbootstrap.com/docs/4.6/utilities/spacing.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-md-4 col-lg-2">
      <div class="card my-2">
        <div class="card-body">
          <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
            <span><font size=4>{{ x.id }}</font></span>
          </div>

          Not yet started!
          
          <div class="progress sh-3">
            <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
          </div>
        </div>
      </div>

      <div class="card my-2">
        <div class="card-body">
          <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
            <span><font size=4>{{ x.id }}</font></span>
          </div>

          Not yet started!
          
          <div class="progress sh-3">
            <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
          </div>
        </div>
      </div>

      <div class="card my-2">
        <div class="card-body">
          <div class="heading mb-0 d-flex justify-content-between lh-1-25 mb-3">
            <span><font size=4>{{ x.id }}</font></span>
          </div>

          Not yet started!
          
          <div class="progress sh-3">
            <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">0%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

How can I put space between Bootstrap cards when they stack for mobile?

3 Answers3