Espaçamento entre as colunas no Bootstrap 4
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>Discussão (2)
Carregando comentários...