Как сделать колонны одинаковой высоты в Bootstrap?

Question

<section class="speacialities">
        <div class="container">
             <div class="row text-center align-items-center">
                <div class="col-12">
                    <h2 class="text-center m-5">Специальности</h2>
                </div>
                <div class="col-xl-4 col-md-6 col-sm-12">
                    <h3 class="text-center text-uppercase n1">Технологии кибербезопасности</h3>
                </div>
                <div class="col-xl-4 col-md-6 col-sm-12">
                    <h3 class="text-center text-uppercase n2">Информатика</h3>
                </div>
                <div class="col-xl-4 col-md-6 col-sm-12">
                    <h3 class="text-center text-uppercase n3">Администрирование ИТ-систем</h3>
                </div>
                <div class="col-xl-4 col-md-6 col-sm-12">
                    <h3 class="text-center text-uppercase n4">Развитие ИТ-систем</h3>
                </div>
                <div class="col-xl-4 col-md-6 col-sm-12">
                    <h3 class="text-center text-uppercase n5">Разработка аппаратного обеспечения и программирование</h3>
                </div>
                <div class="col-xl-4 col-md-6 col-sm-12">
                    <h3 class="text-center text-uppercase n6">Информационная технология бизнеса</h3>
                </div>
            </div>
        </div>
    </section>

.speacialities h3 {
  padding: 30px;
  border: 1px solid black;
}

Answer 1

Накидал на скору руку, остальное сами до ума доведете:

.parent {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid black;
  text-align: center;
}
.parent_rows {
  display: flex;
  flex-direction: row;
  height: 100%;
  border: 1px solid red;
}
.rows_children {
  border: 1px solid green;
  width: 33.3%;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>dd</title>
</head>

<body>

     <div class="parent">
     <div class="rows">
     Специальности
     </div>
     <div class="parent_rows">
     <div class="rows_children">
     COLUMN1
     </div>
     <div class="rows_children">
     COLUMN2
     </div>
     <div class="rows_children">
     COLUMN3
     </div>
     </div>
     <div class="parent_rows">
     <div class="rows_children">
     COLUMN1
     </div>
     <div class="rows_children">
     COLUMN2
     </div>
     <div class="rows_children">
     COLUMN3
     </div>
     </div>
             
    </section>
</body>

</html>

Еще раз кину ссылку на шпаргалку по флексам:

БЛОГ НА HUSL

Как сделать колонны одинаковой высоты в Bootstrap?

Ответы (1 шт):