Jump to content
M_Berno

Espaçamento entre as colunas no Bootstrap 4

Recommended Posts

Boa tarde, sou nova no Bootstrap e gostaria de saber onde modifico o espaçamento entre colunas.
Tenho 6 colunas na mesma linha e gostaria de dar um espaço maior no centro separando os grupos do ranking de mais baixado e de mais utilizados.



 

 <!-- Ranking Mais Baixados-->

    <div class="container my-5">
        <div class="row">
            <div class="col-lg-6 col-md-12">
                <h3 class="text-center mb-4">
                    Ranking<span class="text-warning"> Mais Baixados</span> do Dia
                </h3>
                <div class="row">
                    <div class="col-md-4 col-xsm-12">

                        <div class="card card-profile">
                            <div class="card-avatar">
                                <a href="#">
                                    <img class="img" src="img/geral/medalha_ouro.png">
                                </a>
                            </div>
                            <div class="card-body">
                                <img src="img/ranking/continental.png" alt="continental">
                                <h6 class="card-category text-dark">CONTINENTAL</h6>

                                <p class="card-description">CATÁLOGO AUTOMOTIVO</p>

                                <p class="card-description mb-4">Linha Leve / Pesada</p>
                            </div>

                            <div class="card-footer justify-content-center">
                                <p style="font-size: 11px">
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a></p>
                            </div>
                        </div>





                    </div>
                    <div class="col-md-4 col-xsm-12">
                        <div class="card card-profile">
                            <div class="card-avatar">
                                <a href="#">
                                    <img class="img" src="img/geral/medalha_prata.png">
                                </a>
                            </div>
                            <div class="card-body">
                                <img src="img/ranking/corven.png" alt="corven">
                                <h6 class="card-category text-dark">CORVEN</h6>

                                <p class="card-description">CATÁLOGO AUTOMOTIVO</p>

                                <p class="card-description mb-4">Linha Leve / Pesada</p>
                            </div>

                            <div class="card-footer justify-content-center">
                                <p style="font-size: 11px">
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-xsm-12">
                        <div class="card card-profile">
                            <div class="card-avatar">
                                <a href="#">
                                    <img class="img" src="img/geral/medalha_bronze.png">
                                </a>
                            </div>
                            <div class="card-body">
                                <img src="img/ranking/vox.png" alt="vox">
                                <h6 class="card-category text-dark">VOX</h6>

                                <p class="card-description">CATÁLOGO AUTOMOTIVO</p>

                                <p class="card-description mb-4">Linha Leve / Pesada</p>
                            </div>

                            <div class="card-footer justify-content-center">
                                <p style="font-size: 11px">
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>




            <!-- Ranking Mais Utilizados-->


            <div class="col-lg-6 col-md-12">
                <h3 class="text-center mb-4">
                    Ranking<span class="text-warning"> Mais Utilizados</span> do Dia
                </h3>
                <div class="row">
                    <div class="col-md-4 col-xsm-12">

                        <div class="card card-profile">
                            <div class="card-avatar">
                                <a href="#">
                                    <img class="img" src="img/geral/medalha_ouro.png">
                                </a>
                            </div>
                            <div class="card-body">
                                <img src="img/ranking/continental.png" alt="continental">
                                <h6 class="card-category text-dark">CONTINENTAL</h6>

                                <p class="card-description">CATÁLOGO AUTOMOTIVO</p>

                                <p class="card-description mb-4">Linha Leve / Pesada</p>
                            </div>

                            <div class="card-footer justify-content-center">
                                <p style="font-size: 11px">
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a></p>
                            </div>
                        </div>





                    </div>
                    <div class="col-md-4 col-xsm-12">
                        <div class="card card-profile">
                            <div class="card-avatar">
                                <a href="#">
                                    <img class="img" src="img/geral/medalha_prata.png">
                                </a>
                            </div>
                            <div class="card-body">
                                <img src="img/ranking/corven.png" alt="corven">
                                <h6 class="card-category text-dark">CORVEN</h6>

                                <p class="card-description">CATÁLOGO AUTOMOTIVO</p>

                                <p class="card-description mb-4">Linha Leve / Pesada</p>
                            </div>

                            <div class="card-footer justify-content-center">
                                <p style="font-size: 11px">
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-xsm-12">
                        <div class="card card-profile">
                            <div class="card-avatar">
                                <a href="#">
                                    <img class="img" src="img/geral/medalha_bronze.png">
                                </a>
                            </div>
                            <div class="card-body">
                                <img src="img/ranking/vox.png" alt="vox">
                                <h6 class="card-category text-dark">VOX</h6>

                                <p class="card-description">CATÁLOGO AUTOMOTIVO</p>

                                <p class="card-description mb-4">Linha Leve / Pesada</p>
                            </div>

                            <div class="card-footer justify-content-center">
                                <p style="font-size: 11px">
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Anderson R.
      Boa tarde, gostaria de saber em SQL, como trazer 2 resultados em 2 colunas diferentes do mesmo campo com valores diferentes como exemplo abaixo.
      Esta é a tabela que tenho, gostaria de trazer where D2_CF = 5401 TRAZER A QUANTIDADE EM UMA COLUNA, AND D2_CF = 5910 TRAZER A QUANTIDADE EM OUTRA COLUNA.
      Se alguém puder ajudar agradeço.
      Anderson
       
      D2_COD D2_QUANT D2_PRCVEN D2_TOTAL D2_CF 010301 10 26,86 268,6 5401 010301 1 26,86 26,86 5910
    • By Dani_Ambrosio
      Preciso criar uma coluna em uma tabela já existente, porém os dados dessa nova coluna vão depender de outra tabela
      Ex:
      tenho a tabela faturamento e nela eu preciso criar uma nova coluna que vai chamar fat_removido e os dados dessa coluna vão depender de uma outra tabela que se chama Faturamento removido.
      tanto as tabelas faturamento e a faturamento removido tem o ID_faturamento, quando o mesmo constar nas duas tabelas a nova coluna deverá ser preenchida com Sim e quando não constar deve ser preenchida com Não 
      Como faço isso?
    • By laedsonfln
      Pessoal, boa noite!
       
       
      Gostaria de mostrar 3 colunas e 6 produtos no celular utilizando o shortcode do woocommerce na página principal. 
      Criei um site de Brechó pra minha namorada usando o Wordpress + woocommerce. Tentei usar os shortcodes do woocommerce para chamar os produtos pra página principal. Até aqui tudo bem, porém quando acesso o site pelo celular a loja mostra duas colunas mesmo eu utilizando [products limit="6" columns="3"]. Procurei bastante nas internet e o que eu consegui foi copiar o HTML usando o inspector do google e inserindo num bloco do Elementor (construtor de página que uso) e mudando algumas coisinhas no código. A primeira vista está funcionando mas quando acrescento um produto ele não atualiza no celular porque não é um shortcode.  Alguém pode me ajudar? Sou iniciante na programação. Segue o site: www.brechodaelyevariedades.com.br 
       
      Obrigado! 
    • By alessandrolcruz
      Olá amigos,
       
      Preciso de uma ajuda.
       
      Eu tenho um banco de dados e nele tem uma tabela de nome segurado com os campos (limite_atual, limite_disponível e limite_usado).
       
      Eu preciso fazer com que o campo limite_atual mostre o resultado entre a subtraçao do limite_usado do limite_disponivel e não sei como fazer isso no php.
       
      você podem me ajudar????
    • By Esquerda nunca mais!
      Saudações a todos!
      Tenho um html simples, apesar de tudo, a impressão sai com uma margem um pouco maior no lado esquerdo. Segue folha de estilo.
      https://pastebin.com/i7x8XRXJ
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.