How Make a div with Unordered list in Center bootstrap?

text-center Makes the texts on center but the dots still on left corner.

float: none;
margin-left: auto;
margin-right: auto;

Did not work.

Solution

Below you'll see examples of centering lists with bootstrap and without bootsrap.

In the first example, I'm centering using the concept of bootstrap columns. You know bootstrap grids interpret 12 columns as the fullscreen, so I'm essentially saying fit the list in a 6 column, that has an offset of 3 columns ( (12 - 6)/2 = 3).

In the second example, which is my preferred method I'm using flexbox. justify-content center pretty much tells the elements to horizontally center relative to their parent div. (the div in which the flexbox was called on)

h4 {
  text-align: center;
}

.list {
    display: flex;
  justify-content: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <h4>Centering unordered lists with bootstrap columns</h4>
  <div class="col-xs-6 col-xs-offset-3">
    <ol>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
    </ol>
  </div>
</div>
<hr><br><hr>
<div class="no-bootstrap">
  <h4>Centering unordered lists without boostrap</h4>
  <div class="list">
    <ol>
      <li>Lorem ipsum blah blahsdfadsf blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah bdfasdfasdflah blah</li>
      <li>Lorem ipsum blah blah blah</li>
      <li>Lorem ipsum blah blah blah</li>
    </ol>
  </div>
</div>