Center element in col with bs4

Question

How can I center my 2 circle in my column with bs4 please ?

<div class="row">
    <div class="col-6">
        <div class="circle">
            <div class="circle__inner">
                <div class="circle__wrapper">
                    <div class="circle__content">Bla bla bla</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="circle">
            <div class="circle__inner">
                <div class="circle__wrapper">
                    <div class="circle__content">Bla bla bla</div>
                </div>
            </div>
        </div>
    </div>
</div>

Here's the JS Fiddle: https://jsfiddle.net/v2306jgq/1/

Thanks.

Answer 1

If I'm understanding correctly, like this.

.row {
    background: #e2e2e2;  
}

.circle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2em 0;
    color: #222;
}

.circle__content {
    padding: 2.5em 1em;
    border-radius: 50%;
    border: red 2px solid;
}

@media (min-width: 480px) {
    .circle__content {
        font-size: 1em;
    }
}

@media (min-width: 768px) {
    .circle__content {
        font-size: 2em;
    }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
  <div class="col circle">
    <div class="circle__content">Bla bla bla</div>
  </div>
  <div class="col circle">
    <div class="circle__content">Bla bla bla</div>
  </div>
</div>