Center the content inside a column in Bootstrap

Question

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>

Solution 1

Bootstrap 5 (update 2021)

Since flexbox is still used the centering methods in Bootstrap 5 work the same way. Columns can be centered using offset, auto-margins or justify-content-center (flexbox).

Demo of the Bootstrap 5 Centering Methods

Bootstrap 4 (original answer)

There are multiple horizontal centering methods in Bootstrap 4...

• text-center for center display:inline elements
• offset-* or mx-auto can be used to center column (col-*)
• or, 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

Solution 2

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
             CenterContent
        </div>
    </div>
</div>

Enable 'flex' for the column as we want & use justify-content-center

Solution 3

Add class text-center to your column:

<div class="col text-center">
I am centered
</div>

Solution 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.

check at https://jsfiddle.net/sarfarazk/4fsp4ywh/

Solution 5

Really simple answer in bootstrap 4, change this

<row>
  ...
</row>

to this

<row class="justify-content-center">
  ...
</row>

View more solutions

Comments

[Mihai Alexandru-Ionut]

Use can use class="text-center".

[Praveen Kumar]

I tried using it but it is not working for Bootstrap4, the text alone is getting centered but I need the div with class "nauk-info-connections" itself to be centered aligned inside the col-3 div.

[Praveen Kumar]

I used the traditional method of centering the container .nauk-info-connections{ border-radius:50%; border:1px solid $nauk-orange; height: 100px; width: 100px; margin: 0 auto; }

[mercury]

class container

[Jean-François Corbett]

This is already covered in the top-voted answer

[Sarfaraz Kasmani]

@Jean-François Corbett I have used justify-content-center class instead of mx-auto. This is also one method of doing it. People can use this also I am just trying to help others. Thanks

[Jean-François Corbett]

Ah, right. Well, a bit of explanation can go a long way.

[KayakinKoder]

Thanks. What I don't see in any of the examples or Bootstrap docs is horizontal centering of non-inline elements, at different breakpoints. For example, centering a <select> at md and above, but left aligning below md.

[Zim]

If you're using Bootstrap 4 select it's display:block, not display:inline because form-control is display:block. Of course the original question wasn't about using responsive breakpoints so that's no explained in the answer.

[Akhil]

this is the only solution that worked for me. phew! thank you ;)