Как сделать 4 колонки по центру экрана?

Question

[Chesterfield25]

Как сделать 4 колонки по центру экрана?

<div class="justify-content-center">
      <div class="container">
        <div class="row justify-content-center">
                <div class="col">Колонка</div>
                <div class="col">Колонка</div>
                <div class="w-100"></div>
                <div class="col">Колонка</div>
                <div class="col">Колонка</div>
        </div>
      </div>
    </div>

Comments

[Noder SS]

Подробнее, пожалуйста. Что и как должно стоять?

[Chesterfield25]

Рост, Сейчас содержимое контейнера расположен вверху экрана


А мне нужно что бы оно было по центру экрана по вертикали.

[Виктор Таран]

<div class="row bk-info__panel justify-content-center">

        <div class="col-6 col-md-4 col-xl-2 d-flex mb-4 mb-xl-0">
        <div class="bk-icon">
          <img src="/local/templates/naydikvartiru/assets/images/bk-ico2.png" alt="">
          <div class="bk-icon__num">2.2</div>
          <div class="bk-icon__text">рейтинг</div>
        </div>
      </div>
    

        <div class="col-6 col-md-4 col-xl-2 d-flex mb-4 mb-xl-0">
        <div class="bk-icon">
          <img src="/local/templates/naydikvartiru/assets/images/bk-ico3.png" alt="">
          <div class="bk-icon__num">100</div>
          <div class="bk-icon__text">аккредитовано
          новостроек</div>
        </div>
      </div>
    
        <div class="col-6 col-md-4 col-xl-2 d-flex mb-4 mb-md-0">
        <div class="bk-icon">
          <img src="/local/templates/naydikvartiru/assets/images/bk-ico4.png" alt="">
          <div class="bk-icon__num">34823546983          </div>
          <div class="bk-icon__text">Капитализация
            Тыс.&nbsp;рублей.
          </div>
        </div>
      </div>
     
        <div class="col-6 col-md-4 col-xl-2 d-flex">
        <div class="bk-icon">
          <img src="/local/templates/naydikvartiru/assets/images/bk-ico5.png" alt="">
          <div class="bk-icon__num">100</div>
          <div class="bk-icon__text">квартир в продаже</div>
        </div>
      </div>
  
        <div class="col-6 col-md-4 col-xl-2 d-flex">
        <div class="bk-icon">
          <img src="/local/templates/naydikvartiru/assets/images/bk-ico6.png" alt="">
          <div class="bk-icon__num">Лиц. №1481</div>
          <div class="bk-icon__text">лицензия</div>
        </div>
      </div>
  
  </div>

Answer 1

[Chesterfield25]

Может кому то пригодится

<div class="sidebar container-fluid d-flex h-100 justify-content-center align-items-center">
          <div class="row justify-content-center">
                  <div class="col">Колонка</div>
                  <div class="col">Колонка</div>
                  <div class="w-100"></div>
                  <div class="col">Колонка</div>
                  <div class="col">Колонка</div>
          </div>
        </div>

CSS

.sidebar {
    position: fixed;
    height: 100vh;
  }

Answer 2

[lil_koi]

<div class="container">
 <div class="row">
    <div class="col-3 border">
    <p>колонка</p>
    </div>
    <div class="col-3 border">
    <p>колонка</p>
    </div>
    <div class="col-3 border">
    <p>колонка</p>
    </div>
    <div class="col-3 border">
    <p>колонка</p>
    </div>
 </div
 
</div>

Comments

[Chesterfield25]

По центру экрана

[lil_koi]

Chesterfield25, 4 колонки занимают 25% размера экрана каждая. Открой класс .col-3 и посмотри его ширину

[Chesterfield25]

lil_koi,

Мой код уже содержит нужные мне 4 колонки но они не по центру экрана!

[lil_koi]

Chesterfield25, это не 4 колонки, это 4 квадрата

[Chesterfield25]

lil_koi, проще говоря по ширине и высоте

[ThunderCat]

Chesterfield25,ЭТО 4 БЛОКА. И ЭТО 2 КОЛОНКИ.