ALINHAR TABELAS (PRODUTOS)

birkhoff20 · Junho 24, 2020

Ola, Tudo bom?

Gostaria de saber se alguém tem alguma ideia de como faco para deixar esses botoes de COMPRAR sempre ALINHADOS.

Estou usando o Tema StoreFront, no WordPress. Em outros sites vi que normalmente os titulos quando excede um numero de caracteres (2 linhas), ele coloca os ' ... ' (tres pontinhos), que ai o titulo completo so ficaria visivel caso o cliente clicasse e fosse ver a pagina do produto. Esse botao de OFERTA, acho que vou ter que excluir ele de qualquer jeito pra se adequar melhor ao tema.

Frank K Hosaka · Fevereiro 8, 2023

No Bootstrap quem controla a margem inferior é o mb, ele varia de 0 a 5 Spacing · Bootstrap v5.0 (getbootstrap.com).

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" 
   rel="stylesheet" 
   integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 
   crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" 
   crossorigin="anonymous"></script>
<body style="width:60%;margin:0 auto"><div style=height:10%></div>
   <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
      <div class="col">
        <div class="card mb-4 rounded-3 shadow-sm">
          <div class="card-header py-3">
            <h4 class="my-0 fw-normal"><img src='img.png'></h4>
          </div>
          <div class="card-body">
            <h1 class="card-title pricing-card-title">R$ 95,00</h1>
            <ul class="list-unstyled mt-3 mb-1">
              <li>Vestido</li>
              <li>Evangelico Rosa</li>
              <li>com linhas pretas</li>
            </ul>
            <button type="button" class="w-100 btn btn-lg btn-outline-primary">Comprar</button>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card mb-4 rounded-3 shadow-sm">
          <div class="card-header py-3">
            <h4 class="my-0 fw-normal"><img src="img.png"></h4>
          </div>
          <div class="card-body">
            <h1 class="card-title pricing-card-title">R$ 95,00</small></h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>Vestido</li>
              <li>Evangelico Rosa</li>
            </ul>
            <button type="button" class="w-100 btn btn-lg btn-outline-primary">Comprar</button>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card mb-4 rounded-3 shadow-sm">
          <div class="card-header py-3">
            <h4 class="my-0 fw-normal"><img src="img.png"></h4>
          </div>
          <div class="card-body">
            <h1 class="card-title pricing-card-title">R$ 95,00</h1>
            <ul class="list-unstyled mt-3 mb-5">
              <li>Vestido</li>
              <li></li>
            </ul>
            <button type="button" class="w-100 btn btn-lg btn-outline-primary">Comprar</button>
          </div>
        </div>
      </div>
    </div>

Entrar

ALINHAR TABELAS (PRODUTOS)

Pergunta

birkhoff20

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades