How to center unordered list (with bullets) in div container

1

Hello campers. I am struggling a bit trying to center the unordered list I have created for project#1 Tribute Page. I am trying to use only Bootstrap. I have looked up unordered lists for Bootstrap, but nothing seems to be relevant. Your feedback is greatly appreciated. Thank you!

Gloria

2

Hi there,

I’ve just been having this same issue myself.

The way I solved it was create empty divs either side of the one with the bullet points and use the Bootstrap grid system to assign enough columns to each div so that the bulleted list was centered.

i.e. my first div looked like this:

Then the div for the ul looked like this:

    ........

And finally the last div was the same as the first:

So basically in large screen mode there is an empty div which is 3 columns wide, then the ul takes up the next 6 columns, then another empty div for the last 3 columns.

Then in medium screen sizes it’s 2 empty columns, 8 columns for the ul and another 2 empty.
Lastly on small screen sizes I have 1 empty column, 10 columns for the ul and another empty one at the end.

I’m sure there are many other ways around it but this seems to work for me.

Hope that helps :slight_smile:

3

I too am having this problem, and have not been able to get my text and bullets to align even trying to use CSS. If you find a good fix pleas let me know.

4

Thanks. I’ll try this out.

5

I will let you know if something works out.