How do I use justify-content or align-self to center this?

Question

For some reason I cannot center it. I've tried justify-content and align-items, for every row and col class, but it's not working.

I need the 4 lorem ipsums to be centered in the breakpoints (md, lg). Thank you in advanced!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<section>
  <div class="container vh-100">
    <div class="row row-cols-1 row-cols-md-2 bg-info">
      <div class="col col-md-6 col-lg-12">
        <h3>My Values</h3>
      </div>

      <div class="col bg-danger col-md-6 col-lg-3 ">1 lorem ipsum</div>
      <div class="col col-lg-3 offset-md-6 offset-lg-0">2 lorem ipsum</div>
      <div class="col col-lg-3 offset-md-6 offset-lg-0">3 lorem ipsum</div>
      <div class="col col-lg-3 offset-md-6 offset-lg-0">4 lorem ipsum</div>
    </div>
  </div>
  </div>
</section>

Answer 1

Add the text-center class to <div class="row row-cols-1 row-cols-md-2 bg-info text-center">.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<section>
  <div class="container vh-100">
    <div class="row row-cols-1 row-cols-md-2 bg-info text-center">

      <div class="col col-md-6 col-lg-12">
        <h3>My Values</h3>
      </div>

      <div class="col bg-danger col-md-6 col-lg-3 ">1 lorem ipsum</div>
      <div class="col col-lg-3 offset-md-6 offset-lg-0">2 lorem ipsum</div>
      <div class="col col-lg-3 offset-md-6 offset-lg-0">3 lorem ipsum</div>
      <div class="col col-lg-3 offset-md-6 offset-lg-0">4 lorem ipsum</div>
    </div>
  </div>
  </div>
</section>