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>

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, Mar 01 '17 at 09:54
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; } — Praveen Kumar, Mar 01 '17 at 10:04

Carol Skelly · Answer 1 · 2021-09-20T10:35:49.667

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

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 ` — KayakinKoder, Sep 17 '19 at 23:51
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. — Carol Skelly, Sep 18 '19 at 12:34

score 20 · Answer 2 · answered Oct 14 '19 at 12:44

20

<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

answered Oct 14 '19 at 12:44

DhineshYes

1,008
11
12

this is the only solution that worked for me. phew! thank you ;) – Akhil May 11 '20 at 14:56

score 9 · Answer 3 · answered Nov 20 '17 at 15:13

9

Add class text-center to your column:

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

answered Nov 20 '17 at 15:13

zhekaus

3,126
6
23
46

score 5 · Answer 4 · edited Mar 21 '18 at 08:54

5

<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/

edited Mar 21 '18 at 08:54

Jean-François Corbett

37,420
30
139
188

answered Mar 20 '18 at 14:22

Sarfaraz Kasmani

37
3
7

2

This is already covered in the [top-voted answer](https://stackoverflow.com/a/42559095) – Jean-François Corbett Mar 20 '18 at 14:42
@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 – Sarfaraz Kasmani Mar 20 '18 at 16:43
Ah, right. Well, a bit of explanation can go a long way. – Jean-François Corbett Mar 21 '18 at 08:53

score 3 · Answer 5 · answered May 25 '20 at 15:52

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>

stevec · Answer 6 · 2021-06-09T00:48:52.227

2

Really simple answer in bootstrap 4, change this

<row>
  ...
</row>

to this

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

edited Jun 09 '21 at 00:48

answered Feb 06 '21 at 05:31

stevec

41,291
27
223
311

score 1 · Answer 7 · answered Oct 21 '19 at 13:00

.row>.col, .row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col col-lg-2">
      1 of 2
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Center the content inside a column in Bootstrap

7 Answers7

Linked

Related