Centre el contenido dentro de una columna en Bootstrap 4

Necesito ayuda para solucionar el problema, necesito centrar el contenido dentro de la columna en bootstrap4, encuentre mi código a continuación

Hay múltiples métodos de centrado horizontal en Bootstrap 4

  • text-center de text-center para la display:inline centro display:inline elementos en display:inline
  • offset-* o mx-auto se puede usar para centrar la columna ( col-* )
  • o justify-content-center en la row para centrar las columnas ( col-* )
  • mx-auto para centrar la display:block elementos de display:block dentro de d-flex

mx-auto (márgenes automáticos del eje x) centrará la display:block o display:flex elementos display:flex que tienen un ancho definido, (%, vw, px, etc.). Flexbox se utiliza por defecto en columnas de cuadrícula, por lo que también hay varios métodos de centrado de flexbox.

Demostración de los métodos de centrado Bootstrap 4

En su caso, utilice mx-auto para centrar col-3 y text-center para centrar su contenido.

 
center

http://www.codeply.com/go/GRUfnxl3Ol

o, usando justify justify-content-center en elementos de .row ( .row ):

 
center

Ver también:
Vertical Alinee el centro en Bootstrap 4

Agregue el text-center clase a su columna:

 
I am centered
 
Center text goes here

He usado justify-content-center class en lugar de mx-auto como en esta respuesta .

consulte en https://jsfiddle.net/sarfarazk/4fsp4ywh/

Agregue cualquier clase de compensación, desde offset-1 a offset-11, que alguna vez lo centro.

  
Text here2 span text

por favor revisa el violín usando Bootstrap 4. En el violín usé “offset-5”, por lo que se ha colocado en el centro.