Center an unordered list

HTML-CSS
1

Hi!

I am on the"build a tribute page", and I can’t get the ul to center correctly (I used the text-center but then the bullet just goes all the way over to the left, away from my text, here is the code:

<div class="container">
  <div class="jumbotron">
    <div class="row">
      <div class="col-xs-12">
        <h1 class="text-center">Bill Gates</h1>
        <h2 class="text-center"><i>The richest man on earth</i></h2>
        <div class="img-thumbnail">
          <img class="img-fluid" src="http://aib.edu.au/blog/wp-content/forum/uploads/2015/08/bill-gates-jpg.jpg">
          <p class="text-center">Bill Gates, the owner of Microsoft, is the richest man on earth</p>
        </div>
        <br>
        <h3 class="text-center">Timeline of Bill Gates' life</h3>
        <ul class="text-center">
          <li>Born</li>
        </ul>
      </div>
    </div>
  </div>
</div>
1 Like
2

add this to your CSS:

ul {
  text-align: center;
  list-style: inside;
}

It will center the list and bullet

7 Likes
3

Hello there!

The ul element is a block-level element. According to the MDN reference (source):

A block-level element occupies the entire space of its parent element (container), thereby creating a “block.”

You can see this by giving the <ul> in question a background colour, which spans the entire width of the Bootstrap container that you are using:

<ul style="background: crimson">
    <li>Born</li>
</ul>

While this is not the solution I recommend, you can see this a little bit better if you make the ul element an inline-block:

<div class="text-center"> 
    <ul style="display: inline-block; background: crimson">
        <li>Born</li>
    </ul>
</div>

To achieve what you are trying to do, you could try one of the following suggestions depending on the style that you wish to achieve. This first one make the bullet part of the list content and centers it along with the text—you won’t be using this if you actually want the beginning of each list item to line up though:

<ul class="text-center" style="list-style-position: inside">
    <li>Born</li>
</ul>

Alternatively, and since you are using Bootstrap, you can simply place the list inside a column and offset it. Assuming you are using Bootstrap 4.0.0 alpha, you can do the following:

<div class="col-8 offset-2">
    <ul>
        <li>Born</li>
    </ul>
</div>

I hope that helps! :slight_smile:

EDIT: Typo!

4 Likes
4

Thanks!
Ill check it out.
Can you just write col-* in Bootstrap 4.0.0, does it work just like normal?

EDIT: The display:inline-block worked fine for me

5

You can indeed use col-* in Bootstrap 4! :slight_smile: It sort of replaced col-xs-* in Bootstrap 3 because there are five size tiers in Bootstrap 4 (instead of four in Bootstrap 3).

It is worth noting that in Bootstrap4 you also have the option of using unitless column classes—:

<div class="row>
    <div class="col"><!-- This div behaves like .col-6 --></col>
    <div class="col"><!-- This div behaves like .col-6 --></col>
</div>

Have a quick look at the Bootstrap documentation to see other cool, useful things you can do (source)!

1 Like
6

It is simple to do with Bootstrap 4. Unordered list should be placed inside

and add class mx-auto (centring). Example:
    ...
It is also possible to set the div container width - class="w-75 or w-50 or w-25" (75/50/25 % )
7
<div class="container mx-auto>
8

also, ul has padding on the left by default, so to properly center you need to set padding:0;

2 Likes
9

Hey guys, i’ve tried everything that you mentioned, but i just can’t center ul.
https://codepen.io/milosrancic/pen/KZeYEG?editors=1000

I want ul bullets to start right beneath “fun facts”, but i can’t do that, i have no idea why,
or even, i would delete the bullets , but then texts needs to starts under “fun facts”, as all the texts before it. You know what i mean :slight_smile: #beginner
Thanks

10

Hey, I had the same problem, and I temporarily solved it by placing div with row class and then 3 col-4 divs and I placed my list inside the second column, since it is a central one. Hope it helps.

1 Like
11

thank you so much bro your right

12

hi
to solve this problem,just write this code in ul inside css file
ul {
text-align: left;
width: 40%;
position:relative;
left: 30%;
}

first we make text-align: left -----> text can be beside dotted bullet
then we make width: 40% -------> ul now has 40% width from its container(ex:div)
then we make position: relative —> to can move ul to any position relative to its current position
then we make left: 30% —> move ul to left 30% from current position,
to move it to center of container,why this number?
first ul has width= 40% so remaining 100-40=60
now to make it center divide number 60/2=30
all width= 30% left, 40% ul , 30% remaining … now this position is in center

hope you are understand what i say

11 Likes
13

Thanks man!It helped:)

14

Yes, thank you very much

15

It helped, thank you so much :slight_smile:

16

works for me thank you.

17

It worked! Thank you so much!

18

Thanks alot it really helped

19

Thanks.
Before, I was able to center my unorganized list, but the last sentence of each bullet would be centered on the page, and I wanted it to be aligned on the left side with the other text.
This worked really well for me.