I Need help to fix the problem, I need to center the content inside the column in bootstrap4, please find my code below
<div class="container">
<div class="row justify-content-center">
<div class="col-3">
<div class="nauk-info-connections">
</div>
</div>
</div>
This question is related to
twitter-bootstrap
flexbox
bootstrap-4
<div class="container">_x000D_
<div class="row">_x000D_
<div class="col d-flex justify-content-center">_x000D_
CenterContent_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
Enable 'flex' for the column as we want & use justify-content-center
Add class text-center
to your column:
<div class="col text-center">
I am centered
</div>
There are multiple horizontal centering methods in Bootstrap 4...
text-center
for center display:inline
elementsoffset-*
or mx-auto
can be used to center column (col-*
)justify-content-center
on the row
to center columns (col-*
)mx-auto
for centering display:block
elements inside d-flex
mx-auto
(auto x-axis margins) will center display:block
or display:flex
elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.
Demo of the Bootstrap 4 Centering Methods
In your case, use mx-auto
to center the col-3
and text-center
to center it's content..
<div class="row">
<div class="col-3 mx-auto">
<div class="text-center">
center
</div>
</div>
</div>
https://codeply.com/go/GRUfnxl3Ol
or, using justify-content-center
on flexbox elements (.row
):
<div class="container">
<div class="row justify-content-center">
<div class="col-3 text-center">
center
</div>
</div>
</div>
Also see:
Vertical Align Center in Bootstrap 4
<div class="container">
<div class="row justify-content-center">
<div class="col-3 text-center">
Center text goes here
</div>
</div>
</div>
I have used justify-content-center
class instead of mx-auto
as in this answer.
2020 : Similar Issue
If your content is a set of buttons that you want to center on a page, then wrap them in a row and use justify-content-center.
Sample code below:
<div class="row justify-content-center">
<button>Action A</button>
<button>Action B</button>
<button>Action C</button>
</div>
.row>.col, .row>[class^=col-] {_x000D_
padding-top: .75rem;_x000D_
padding-bottom: .75rem;_x000D_
background-color: rgba(86,61,124,.15);_x000D_
border: 1px solid rgba(86,61,124,.2);_x000D_
}
_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<div class="container">_x000D_
<div class="row justify-content-md-center">_x000D_
<div class="col col-lg-2">_x000D_
1 of 3_x000D_
</div>_x000D_
<div class="col col-lg-2">_x000D_
1 of 2_x000D_
</div>_x000D_
<div class="col col-lg-2">_x000D_
3 of 3_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
Really simple answer in bootstrap 4, change this
<row>
...
</row>
to this
<row justify-content-center>
...
</row>
Source: Stackoverflow.com