How do I use justify-content or align-self to center this? (Bootstrap only)

Question

This is my code, and 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'm using a cdn of 4.6 Bootstrap.

this one:

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"

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

<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

<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>

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

Answer 2

You can make use of the default class .text-center provided by bootstrap framework and add it to the parent element to make all the text centered.

change this line and the items will be aligned in the center.

<section class="text-center"> 

Answer 3

Haven't you tried to add to the container with class "row row-cols-1" class "d-flex"?