'Cannot center a col class inside a row from bootstrap

I've been doing some bootstrap lately and I stumbled upon a problem. Namely, I use a container and nest row plus a few col classes in it. Here is a codesandbox link. As you can see, I use a styled component for the <Rectangle /> and then I add three of them in the first row and one in the second. However they aren't centered and I tried to center them by adding align-items and mx-auto but did not make it. enter image description here As you can see from the photo, the rectangles inside the div.row aren't centered but they're kind of floated on the left. The same thing goes for the second row, it's not centered. The question I have is, is it possible to center these rectangles (col classes) inside a row class? In this case I added 3x1 but in my scenario, it is dynamic and in some case I'd have 2 rectangles at top + 2 at bottom, 2 at top + 1 at bottom etc. and I need them to center automatically. If possible, how can I achieve it and center them?

cssbootstrap-4


Solution 1:[1]

To align items in column, make .col flex and then you can justify (align) child items. Add d-flex justify-content-center to your columns to align it

.jKVMcY {
  height: 90px;
  width: 115px;
  color: black;
  display: flex;
  background-color: rgb(229, 228, 226);
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  border: 1px solid;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">


<div class="container py-3 bg-light">
  <div class="row">
    <div class="col d-flex justify-content-center">
      <div class="sc-bczRLJ jKVMcY">test</div>
    </div>
    <div class="col d-flex justify-content-center">
      <div class="sc-bczRLJ jKVMcY">test</div>
    </div>
    <div class="col d-flex justify-content-center">
      <div class="sc-bczRLJ jKVMcY">test</div>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yaroslav Trach

Related Questions