Preciso de ajuda para resolver o problema, preciso de centrar o conteúdo dentro da coluna em bootstrap4, por favor encontre o meu código abaixo
<div class="container">
<div class="row justify-content-center">
<div class="col-3">
<div class="nauk-info-connections">
</div>
</div>
</div>
Existem múltiplos ** métodos de centralização horizontal em Bootstrap 4***...
text-center
para centro display:inline
elementosjustify-content-center
na fileira
a **center columns** (`col-`)mx-auto' para centrar
display:block' elementos dentro do `d-flex'.O mx-auto
(auto x-axis margens) centrará display:block
ou display:flex
elementos que têm uma largura definida, (%, vw, px, etc.). O Flexbox é utilizado por defeito em colunas de grelha, pelo que também existem vários métodos de centralização do Flexbox.
Demonstração dos métodos do Bootstrap 4 Centering
No seu caso, utilize mx-auto
para centralizar o col-3
e text-center
para centralizar's content...
<div class="row">
<div class="col-3 mx-auto">
<div class="text-center">
center
</div>
</div>
</div>
http://www.codeply.com/go/GRUfnxl3Ol
ou, utilizando justify-content-center
em elementos flexbox (.row
):
<div class="container">
<div class="row justify-content-center">
<div class="col-3 text-center">
center
</div>
</div>
</div>
Ver também:
https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4/42252877#
<div class="container">
<div class="row justify-content-center">
<div class="col-3 text-center">
Center text goes here
</div>
</div>
</div>
Utilizei a classe justify-content-center
em vez de mx-auto
como em esta resposta.
verificar em