Align Divs, with or without Bootstrap

Question

Hello, I need a centralized grid using bootstrap, I managed to do this using flex and justify-content-center:

   
.item {
  border: dashed 1px blue;
  padding: 5px;
}
.container {
  border: solid 1px black;
  padding: 20px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<div class="d-flex flex-wrap justify-content-center container">
  <div class="item">Conteudo 01</div>
  <div class="item">Conteudo 02</div>
  <div class="item">Conteudo 03</div>
  <div class="item">Conteudo 04</div>
  <div class="item">Conteudo 05</div>
  <div class="item">Conteudo 06</div>
  <div class="item">Conteudo 07</div>
  <div class="item">Conteudo 08</div>
</div>

However, note that when the line is broken, the Ivs that go down are centered as well, is there any way that, after breaking the line, the remaining Ivs will be left aligned? The expected result would be like this:

---

Edit: I managed to do without using Bootstrap

.container {
  border: solid 1px black;
  padding: 20px;
}
.containerGrid {
  border: solid 1px red;
  padding: 10px;
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  width: min-content;
  
  /* Centralizando Container */
  position: relative;
  left: 50%;
  transform: translateX(-50%)
}
.item {
  text-align: center;
  border: dashed 1px blue;
  padding: 5px;
}

<div class="container">
  <div class="containerGrid">
    <div class="item">Conteudo 01</div>
    <div class="item">Conteudo 02</div>
    <div class="item">Conteudo 03</div>
    <div class="item">Conteudo 04</div>
    <div class="item">Conteudo 05</div>
    <div class="item">Conteudo 06</div>
    <div class="item">Conteudo 07</div>
    <div class="item">Conteudo 08</div>
    <div class="item">Conteudo 09</div>
  </div>
</div>

Note that after the line break, the items div go to the left side of the container, and all items in the container stay centralized.

Answer 1

Directly in html I can not think of any solution but by css we can do just use Nth-Child.

.div-principal {
  display: flex;
  justify-content: center;

  &:nth-child(7) {
    justify-content: left;
  }

  &:nth-child(8) {
    justify-content: left;
  }
}

Answer 2

All I see is Justify-content-start if it’s just bootstrap

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="containerGrid">
    <div class="item">Conteudo 01</div>
    <div class="item">Conteudo 02</div>
    <div class="item">Conteudo 03</div>
    <div class="item">Conteudo 04</div>
    <div class="item">Conteudo 05</div>
    <div class="item">Conteudo 06</div>
    <div class="item">Conteudo 07</div>
    <div class="item">Conteudo 08</div>
    <div class="item">Conteudo 09</div>
  </div>
</div>

.item {
  border: dashed 1px blue;
  padding: 5px;
  margin: 5px;
}
.container {
  border: solid 1px black;
  padding: 20px;
  margin: 10px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="d-flex flex-wrap justify-content-start container">
  <div class="item">Conteudo 01</div>
  <div class="item">Conteudo 02</div>
  <div class="item">Conteudo 03</div>
  <div class="item">Conteudo 04</div>
  <div class="item">Conteudo 05</div>
  <div class="item">Conteudo 06</div>
  <div class="item">Conteudo 07</div>
  <div class="item">Conteudo 08</div>
  <div class="item">Conteudo 09</div>
  <div class="item">Conteudo 10</div>
</div>