title: Centering a list in Bootstrap CSS
body: <h2>Edit after duplicate report</h2>
  
  <h2>Apologies I think the suggested duplicate may actually be a duplicate.  I tried it first and it didn't work for me hence a new question.  Having looked again with the new suggested answer I realise my issues are probably with the out of the box settings of the tool I am using (codepen.io).  I think I probably need to look at this tool instead!  (whether its's the tool or the default version of bootstrap I haven't checked yet).  Thanks.</h2>
  
  <p>I am doing a very noddy little page to try and get some front end know-how.  Very basic stuff I think, but I'm struggling to centre a list on my page.  Essentially I have plugged in bootstrap and I believe one of these built css classes is adding bullet points to the unordered list which I think is good.  When I centre the text though the bullet points go to the left of the page while the text is centred.  I thought maybe the answer was to split that section into 3 columns and put my list in the middle column which works to an extent but shifts about when I try different screen sizes (I thought the point of bootstrap was top facilitate handling responsive design!?)</p>
  
  <p>Anyway I wondered if anyone could give me a hint on how to centre my list in a way that it will a) be left justified so that it is along the lines of </p>
  
  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  </ul>
  
  <p>but in the centre of the page and b) remain centred regardless of screen sizes ?   </p>
  
  <p>This is the rough html.  I've tried to cut it down a bit to keep to the essentials but let me know if more information would help.   I've tried various css based methods and all have failed but I thought (maybe wrongly!) really the answer ought to be a bootstrap class ? and so have left the example code with my attempted bootstrap attempt.  In reality though I'm just curious now to see how it ought to be done so an css answer would be equally well appreciated!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="well text-center maindiv"&gt;
    &lt;h1 style="color: green" class="text-primary text-center"&gt;The Mighty Diamonds&lt;/h1&gt;
    &lt;h3 class="text-center"&gt;The band that brought joy to the hearts of millions&lt;/h3&gt;
    &lt;div id="div1" class="well text-center"&gt;
      &lt;div id="div2"&gt;
        The Mighty Diamonds were a band from Jamaica&lt;/div&gt;
    &lt;/div&gt;
    &lt;h3 class="text-center;"&gt;A Brief Biog&lt;/h3&gt;
    &lt;p class="text-left body-para"&gt;[Paragraph text]&lt;/p&gt;
    &lt;h3&gt;Studio albums&lt;/h3&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-xs-4"&gt;&lt;/div&gt;
        &lt;div class="col-xs-4 text-left"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;span&gt;1964&lt;/span&gt; - Album 1&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;1966&lt;/span&gt; - Album 2&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;1967&lt;/span&gt; - Authentic Album Vol. 2&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;1996&lt;/span&gt; - Greetings from Album 4&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;1998&lt;/span&gt; - Ball of Fire&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;2009&lt;/span&gt; - From Paris with Love&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;2007&lt;/span&gt; - On the Right Track&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;2012&lt;/span&gt; - Walk With Me Album&lt;/li&gt;
            &lt;li&gt;&lt;span&gt;2016&lt;/span&gt; - Platinum Ska&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-4"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>