Bootstrap 4 - Center List

Question

I am building an app with the Bootstrap 4 beta. This app is really basic at the moment and has a single inline list. I\'m trying to center this list horizontally in the middle o

Answer 1

Use text-center OR,

Use mx-auto inside a flexbox container (d-flex)..

https://www.bootply.com/6COUMfNrEU

  

    
Item 1
    
Item 2
    
Item 3
    
Item 4
    
Item 5
    
  

How to centering works in Bootstrap 4...

text-center is used for display:inline elements

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

Center text or inline elements: text-center

    
i'm centered
    

        
i'm centered!
    

Center display:block or display:flex: mx-auto

Columns can also be centered with: mx-auto, because row is display:flex

    

        
I'm .col-4 centered
    

Demo Bootstrap 4 Horizontal Centering