Centering a list in Bootstrap CSS [duplicate] - html

Question

This question already has answers here:
How to horizontally align ul to center of div?
(5 answers)
Closed 6 years ago.
Edit after duplicate report
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.
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!?)
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
Item 1
Item 2
Item 3
but in the centre of the page and b) remain centred regardless of screen sizes ?
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!
<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>

Answer 1

So I figure that your issue here is that your ul is not centered in container > row > text-left
Add display: inline-block to .container > .row > .text-left > ul to let it take as much width as its contents
Add text-align: center to .container > .row > .text-left to center the ul inside.
Add text-align: left to the ul to justify the list to left.
See demo below:
.container > .row > .text-left {
text-align: center;
}
.container > .row > .text-left > ul {
text-align: left;
display: inline-block;
}
<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):
.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>