Align Divs, with or without Bootstrap

Asked

Viewed 51 times

0

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: inserir a descrição da imagem aqui



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.

html css grid
  • 2

    You can, but this will happen https://prnt.sc/13qvf8p since it does not center, where it does not fit an entire item it will break the line and leave a blank, the best way to treat this is with display:grid and not display:flex

2 answers

0

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

  • Very good this resolution, however, the amount of elements are dynamically changed, so I cannot use a specific position like Chil(8) or Child(7).

0

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>

Browser other questions tagged html css grid

You are not signed in. Login or sign up in order to post.