in Bootstrap can't be centered when justify-content-center is applied to
when
is within a row

Question

Here is my code (only body)

Display :

I can however , center ul when i place ul within a column. Is there a specific reason why my above code could not center ul

EDIT :

If i remove row from the code, I could use justify-content-center on ul.My question however still stands as I could not explain the behavior when row is present

user_13368658 · Answer

Try this instead,

First Method

please add flex-basis:100%; to for align

ul{
  flex-basis:100%;
}

Second Method

please add justify-content-center to row class to align

user_13515557 · Answer

The ul itself is not centered, so using .justify-content-center will center its child li elements only inside the ul, while it itself remains on the left. Add .justify-content-center to the ul's parent element (the row div) and it should work.

user_6191866 · Answer

try this,

<ul> in Bootstrap can't be centered when justify-content-center is applied to <ul> when <ul> is within a row

3 Answers

First Method

Second Method