'Set margin on bootstrap cols without affecting width

I am trying to display a list of card width boostrap. I made my html like so :

<div class="card-deck">
    <div class="card card-widget col-sm-2 m-2">
        <div class="card-body text-center">
            TEXT
        </div>
    </div>
    <div>
        etc...
    </div>
</div>

The problem is, margin seems to expand the cards' width. So it makes someting like that... (it should display 4 cols)

screen 1

If I remove margins, it makes something like...

screen 2

Thanks for your help !

csstwitter-bootstrapgridresponsive


Solution 1:[1]

Thanks for your answers. However it does not solve my problem :(

First solution : I cannot do that easily because I get them from a database so I don't know how many elements will be returned and I do really want to make a new deck card every 4 cards. The justify-content-center is not really elegant and it shifts the problem

Second solution : It looks like my second screen : https://i.stack.imgur.com/erkcT.jpg

Solution 2:[2]

You must use padding, don't margin if you don't want any cards size change.

change

        <div class="card card-widget col-sm-2 m-2">

with this

       <div class="card card-widget col-sm-2 p-2">


<div class="card-deck">
    <div class="card card-widget col-sm-2 p-2">
        <div class="card-body text-center">
            TEXT
        </div>
    </div>
    <div>
        etc...
    </div>
</div>

Solution 3:[3]

Margin can not increase the width of card like that. However, it will definitely increase container's width.

APPROACH 1: Check the code below. It will assign equal widths to the cards.

NOTE : It is working like row-column feature of bootstrap. So you have to add n number of card elements in a card-deck for n number of columns.

<div class="card-deck mx-2 mt-2">
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
</div>
<div class="card-deck mx-2">
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
</div>

APPROACH 2: In case you don't want to change card's width :

<div class="card-deck m-2 mb-0 justify-content-center">
  <div class="card card-widget col-sm-2 m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col-sm-2 m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col-sm-2 m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
  <div class="card card-widget col-sm-2 m-2">
    <div class="card-body text-center">
      TEXT
    </div>
  </div>
</div>

Solution 4:[4]

(Bootstrap 5)

I was able to solve the problem by wrapping the card in a column first (which is what the documentation recommends). This appears to apply an mx-2 margin as a default, though I can't actually find out why this is the case. In any case it allowed me to get a margin between cards without breaking the grid.

<div class="container">
  <div class="row">
    <div class="col-lg-4 my-2">
      <div class="card">
      </div>
    </div>
    <div class="col-lg-4 my-2">
      <div class="card">
      </div>
    </div>
    ...etc
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 VL93
Solution 3
Solution 4 unusualhabit

Related Questions