How to Decrease Card Size in Boostrap

Question

Hello, I’m editing a boostrap template in race, but I’m not managing to organize a page with cards and columns. I would like to decrease the size of the cards so that they fit four per line.

My website: http://tratspay.com/app/meus-produtos.html

Code so far:

<!-- Card -->
            <div class="card"> <img class="card-img-top img-responsive" src="dist/img/img12.jpg" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Nome do Produto</h4>
                <p class="card-text">Vendas: 1234</p>
                <p>Afiliados: 123 </p>
                 <p>Preço: R$ 123,12</p>
                 <p>Cadastrado em: 22/12/12<p>


                 </p>
                <a href="editar-produto.html" class="btn btn-primary">Editar Produto</a> </div>
            </div>
            <!-- Card --> 
          </div>
          <div class="col-lg-4 m-b-3"> 
           <!-- Card -->
            <div class="card"> <img class="card-img-top img-responsive" src="dist/img/img12.jpg" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Nome do Produto</h4>
                <p class="card-text">Vendas: 1234</p>
                <p>Afiliados: 123 </p>
                 <p>Preço: R$ 123,12</p>
                 <p>Cadastrado em: 22/12/12<p>

                 </p>
                <a href="editar-produto.html" class="btn btn-primary">Editar Produto</a> </div>
            </div>
            <!-- Card --> 
          </div>
          <div class="col-lg-4 m-b-3"> 
            <!-- Card -->
            <div class="card"> <img class="card-img-top img-responsive" src="dist/img/img12.jpg" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Nome do Produto</h4>
                <p class="card-text">Vendas: 1234</p>
                <p>Afiliados: 123 </p>
                 <p>Preço: R$ 123,12</p>
                 <p>Cadastrado em: 22/12/12<p>

                 </p>
                <a href="editar-produto.html" class="btn btn-primary">Editar Produto</a> </div>
            </div>
            <!-- Card --> 
          </div>


          </div>


          <div class="col-lg-12 m-t-6">


                </div


            </div>
          </div>

                  </div>
                </div>

Answer 1

The Bootstrap grid can be divided up into columns, so your grid to have 4 cards per row you need to 4 col-3, totalling 12 col (4x3=12)

I strongly recommend that you read the official grid documentation to better understand how these column divisions work: https://getbootstrap.com/docs/4.0/layout/grid/

See this image with the editing done directly on the site

Answer 2

    <div class="row">
      <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">Sua div class card aqui</div>
      <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">Sua div class card aqui</div>
      <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">Sua div class card aqui</div>
      <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">Sua div class card aqui</div>
    </div>