Search code examples
cssbootstrap-4alignmenthtml-listscenter

How I center html "ul" element in bootstrap 4 (horizontal + vertical) inside <section><div class='row'><div class='col-sm'>

How to center html "ul" element in bootstrap4 (horizontal + vertical) with horizontal aligned "li"

<section>
   <div class='row'>
      <div class='col-sm'>
            <ul>
                 <li>A</li>
                 <li>B</li>
                 <li>C</li>
            </ul>
      </div>
   </div>
</section>

Solution

  • If you use this code the list will be displayed in the center of the yellow box. I don't know why it won't work on the code preview on stackoverflow, but here you can see that it works.

    <section>
   <div class='row'>
      <div class='col-sm' style="background-color: yellow; display:grid;height: 100%">
            <ul style="margin: center;">
                 <li>A</li>
                 <li>B</li>
                 <li>C</li>
            </ul>
      </div>
   </div>
</section>