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

how do i put my list items in center

Do you have a codepen link?


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

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.

    <!-- 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 {
  list-style-position: inside;

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.

thanks for help sir.