0

I'm working on the Free code camp project, but I've hit a snag. I cannot get the paragraph text below the image to center. I have the set to grid 4.

<div class="container">
  <div class="row">
    <div class="jumbotron">
      <div class="col-xs-12">
        <h1 class="text-center text-uppercase">Bernie Sanders</h1>
        <em><h2 class="text-center">"The man who stands for the people"</h2></em>
        <img id="bernie" src="https://imgur.com/iw13OaU.jpg" alt="Bernie Sanders">
        <div class="col-xs-4 col-md-4">
          <h3 class="text-center" id="timeline">A timeline of Bernie Sanders Accomplishments</h3>
          <ul class="text-justify small" id="list">
          ...

https://codepen.io/thehiddencheese/pen/WMWJeW

Bhuwan
  • 16,525
  • 5
  • 34
  • 57
thehiddencheese
  • 83
  • 1
  • 11

2 Answers2

0

First wrap your grid 4 to the .row and use bootstrap [Flex Utilities] .justify-content-center class to that row like

<div class="row justify-content-center">
  <div class="col-sm-4"></div>
</div>

Another solution will be to use [offset] classes like

<div class="row">
  <div class="col-sm-4 offset-sm-4"></div>
</div>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
0

You can use text-align: center for the div <div class="col-xs-4 col-md-4"> then the paragraph text will be aligned to the center of the page below the image.

But, it's looking odd with the bullet points and text aligned to center. If you are aligning it to the center I suggest going without bullets :).

Below is the div tag you can use.

<div class="col-xs-4 col-md-4" style=" text-align:  center;">
Bruce
  • 78
  • 7