In a row of 3 blocks, it is necessary that there is an indent between them and their size is adjusted to each other. How can you do that? I use Bootstrap 4 (Picture 1 - for now) (Picture 2 is an example)

Picture 1

Picture 2

<div class="container text-center"> <div class="row"> Запрос к БД Цикл while <div class="col-4 mb-2"> <div class="p-3 mb-3 bg-warning rounded"> <h4><b> Вывод из БД </b></h4> <p> Вывод из БД</b> <p align="left">Вывод из БД</b></i></p></p> </div> </div> </div>

  • Did you try to use flexbox? - Yuri
  • @Yuri, did not try, now I tried through it, but displays everything in a line and does not transfer to the next line. Do not tell me how to make through it, but that was the idea that I described - nameisusselesinfo
  • Should there be different gaps? How should transfer to other lines look like? - Yuri
  • @Yuri, the gaps are the same, just empty space between the lines, and the next lines again have these blocks (3 pieces for each line) - nameisusselesinfo
  • ru.stackoverflow.com/questions/690500/… - Yuri

2 answers 2

 .container{ display:flex; width: 400px; justify-content: space-beetwen; flex-wrap: wrap; /* чтобы переносилось */ } .item{ height: 50px; width: calc(30% - 30px); /* отнимать необходимый вам margin умноженный на 2 */ margin: 15px; background: grey; } 
 <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

    If you use boootstrap 4, then:

     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" > <div class="container text-center"> <div class="row"> <div class="col-4 mb-2"> <div class="bg-success text-white"> 1 </div> </div> <div class="col-4 mb-2"> <div class="bg-success text-white"> 2 </div> </div> <div class="col-4 mb-2"> <div class="bg-success text-white"> 3 </div> </div> <div class="col-4 mb-2"> <div class="bg-success text-white"> 4 </div> </div> <div class="col-4 mb-2"> <div class="bg-success text-white"> 5 </div> </div> <div class="col-4 mb-2"> <div class="bg-success text-white"> 6 </div> </div> </div> </div>

    • Everything goes in 1 column, I just have the data output from the database in these blocks and it turns out like this <main class="container mt-5"> <div class="container text-center"> <div class="row"> <div class="span3"> <div class="col-4 mb-2"> // ПОДКЛЮЧЕНИЕ И ВЫВОД ДАННЫХ ИЗ БД // </div> </div> </div> </div> </main> - nameisusselesinfo
    • @ Daniel, add code to your question - HamSter
    • I used your solution, it worked, but the blocks do not adjust in width to each other. they are of different widths, how can I fix them? - nameisusselesinfo
    • @ Daniel, I’m writing - add your code, because it’s not clear what you want. The bootstrap for .col set to indents at 15px , .col-4 is 33.333% . ... - HamSter