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 jvb
      Olá pessoas ... 
      Primeiro de tudo obrigado desde já ... 
      Estou criando conteúdo para estudos, aproveitando o tempo estudando PHP, Mysql e css Juntos e algumas ideias vão surgindo, não que elas sejam pra complicar, mais sim ficar mais objetivo o site Local. Sendo assim, ajuda dos colegas é .
       
      ----------------------------------------
      Eu tenho 3 Colunas >
      Coluna 1
      Coluna 2
      Coluna 3
      as 3 segui height auto, de acordo com conteudo, sendo que a coluna 1 sempre tem height maior, pois é ela que mostra capitulos de um livro, por exemplo.
      A coluna 2 tem conteudo do capitulo selecionado na coluna 1, nela coloco os titulos com links ancoras, de todo o capitulo ( selecionado na coluna 1), obviamente a coluna 3 contem o capitulo, com seus:
      <p></p>
      <img>
      <strong>
      <h1 a h6> etc...
      ok.
       
       
      O problema
      ----------------------------------------
       
      eu gostaria de colocar a coluna 2 seguindo a rolagem da página top e bottom, para top, ok de boa,  consigo com .rolagem { position: stick;} para bottom a coluna 2 é maior que a tela em alguns casos, então eu só consigo ver todo conteúdo ao chegar no final da coluna 1 ou 3.
       
      Então seria na rolagem a baixo, a coluna 2 também rolar, mas ficar com conteudo sempre na tela. Pra baixo rola até o final, pra cima rola até o topo da coluna, nunca sair o conteúdo da tela, não importa o tamanho das colunas 1 e 3. 
      Como posso resolver? tem como só com css? 
       
       
      ---------------------------------------- 
    • By Leloruhan
      Boa noite , estou com uma duvida de colocar a coluna ao lado da outra , segue imagens do código e do prototipo , alguém consegue me ajudar ? falar em que estou errando.
      TENTEI USAR DISPLAY : FLEX  E INLINE-BLOCK DECLARANDO AS COLUNAS TB MAS "não FUNCIONOU".
    • 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! 
×

Important Information

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