Rectangle 27 0

html Centering a list in Bootstrap CSS?


.container > .row > .text-left {
  display: flex;
  justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="well text-center maindiv">
  <h1 style="color: green" class="text-primary text-center">The Mighty Diamonds</h1>
  <h3 class="text-center">The band that brought joy to the hearts of millions</h3>
  <div id="div1" class="well text-center">
    <div id="div2">
      The Mighty Diamonds were a band from Jamaica</div>
  </div>
  <h3 class="text-center;">A Brief Biog</h3>
  <p class="text-left body-para">[Paragraph text]</p>
  <h3>Studio albums</h3>
  <div class="container">
    <div class="row">
      <div class="col-xs-4"></div>
      <div class="col-xs-4 text-left">
        <ul>
          <li><span>1964</span> - Album 1</li>
          <li><span>1966</span> - Album 2</li>
          <li><span>1967</span> - Authentic Album Vol. 2</li>
          <li><span>1996</span> - Greetings from Album 4</li>
          <li><span>1998</span> - Ball of Fire</li>
          <li><span>2009</span> - From Paris with Love</li>
          <li><span>2007</span> - On the Right Track</li>
          <li><span>2012</span> - Walk With Me Album</li>
          <li><span>2016</span> - Platinum Ska</li>
        </ul>
      </div>
      <div class="col-xs-4"></div>
    </div>
  </div>
</div>

A more simple solution (if flexbox is an option):

Apologies guys I did check other answers (and general google) first. Didn't occur to me to check same code in a different tool to check. Mia culpa

I just wrote it down, didn't think about looking for a dupe... :)

So I figure that your issue here is that your ul is not centered in container > row > text-left

Note