Теория урока

6.1. Дополнительно по сеткам Bootstrap

Также вы можете использовать ряд столбцов, использую класс .row-cols*, чтобы установить количество столбцов.

Пример:

Пример

<div class="container">
    <div class="row row-cols-2">
        <div class="col">Столбец</div>
        <div class="col">Столбец</div>
        <div class="col">Столбец</div>
        <div class="col">Столбец</div>
    </div>
</div>

Также вы можете разорвать столбцы по горизонтали классом .w-100

Задание

Сверстайте этот макет на Bootstrap (использовать только сетку), и с технологией flex-box.

Примечание

Если хотите, чтобы проверили ваше задание, присылайте мне в личные сообщения.

Автор курса: Олег Данилюк (по всем вопросам)

Предыдущий урок «5.1. Небольшая практика по Bootstrap» Следующий урок «1.1. Знакомство с Git»

Возможно, вам это будет интересно: Создаем столбцы в Bootstrap

Практики пока что нет. Скоро она появится! Но вы можете выполнить ее самостоятельно по инструкциям из курса.

Код HTML

Код CSS

Код JavaScript

Браузер

Вернуть расположение блоков

Код HTML

Восстановить HTML код

Код CSS

Восстановить CSS код

Код JavaScript

Восстановить JavaScript код

Браузер×

Задание

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков и участие в рейтинге среди пользователей), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

Посмотрите код и нажмите "Проверить задание"

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.