CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4flexboxbootstrap-5
Praveen Kumar
Praveen Kumar

Reputation: 1341

Center the content inside a column in Bootstrap

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>

Upvotes: 124

Views: 265013

Answers (7)

MarcoZen
MarcoZen

Reputation: 1663

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>

Upvotes: 3

Carol Skelly
Carol Skelly

Reputation: 362290

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

Upvotes: 262

stevec
stevec

Reputation: 52208

Really simple answer in bootstrap 4, change this

<row>
  ...
</row>

to this

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

Upvotes: 2

Abdo-Host
Abdo-Host

Reputation: 4102

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

Upvotes: 1

DhineshYes
DhineshYes

Reputation: 1088

<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

Upvotes: 20

Sarfaraz Kasmani
Sarfaraz Kasmani

Reputation: 37

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

Upvotes: 5

zhekaus
zhekaus

Reputation: 3194

Add class text-center to your column:

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

Upvotes: 10

Related Questions