There are multiple horizontal centering methods in Bootstrap

• 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

Detailed documentation and more examples you can find in our Bootstrap Horizontal alignment Docs

---

mx-auto

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.

In your case, use mx-auto to center the col-3 and text-center to center it's content..

---

or, using justify-content-center on flexbox elements (.row):