0

img

<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;
}
3
  • Вместо align-items-center используйте align-items-stretch, и границы нужно делать для колонок, а не заголовков Commented 2 июн. 2022 в 9:34
  • Я рекомендую использовать flex. Через него все легко делается. Вот шпаргалка неплохая по нему: tpverstak.ru/flex-cheatsheet Commented 2 июн. 2022 в 9:36
  • @АлексейБелкин В Bootstrap grid и так на базе flex построен Commented 2 июн. 2022 в 9:53

1 ответ 1

0

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

.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>

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.