How do i put my unordered list in center and its list item just below in center

1

Project Web
Project Web1171×86 3.93 KB

how do i put my list items in center

2

Do you have a codepen link?

3

yes


and how do i put that circular list style close to text

4

A couple of things first. Your page is using both versions of Bootstrap. If you have what’s in the fcc curriculum in mind, you should use version 3.

Elements with the col-* classes should be nested in a <div> with a row class. And as far as I know, you should only use them on elements like <div>, not <ul>.

You can add list-style-position: inside to the ul styles to keep the bullets close to the text. https://stackoverflow.com/q/5347833

    <!-- note the row div -->
    <div class="row">
      <!-- I removed the div around the h4 because it skews the centering.
           Or you can keep it and use col-xs-12 for the class -->
      <h4 class="text-center">Here's a time line of Dr. Borlaug's life:</h4>
      <!-- I nested the ul in a col div -->
      <div class="col-md-12">
        <ul class="text-center">
          <li>1891-Born in Mhow,Central Provinces, India</li>
          <li>Eventually earning law degrees and multiple doctorates</li>
        </ul>
      </div>
    </div>

ul {
  list-style-position: inside;
}
5

A couple other points:

Don’t use <em> to italicize the <h3>. Use CSS instead.

Do not use <center>. It’s deprecated. You might also want to add the img-responsive class to the image.

<p> is more appropriate for the caption text.

6

thanks for help sir.