Оглавление мини-курса «Bootstrap — сетки» от пользователя сайта Codebra

• Урок 1. Введение в курс «Bootstrap — сетки»
• Урок 2. Подключаем Bootstrap
• Урок 3. Создаем столбцы в Bootstrap
• Урок 4. Адаптивные столбцы в Bootstrap
• Урок 5. Небольшая практика по Bootstrap
• Урок 6. Дополнительно по сеткам 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.

Примечание

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

Похожие записи:

Урок 4. Адаптивные столбцы в Bootstrap Урок 3. Создаем столбцы в Bootstrap Урок 5. Небольшая практика по Bootstrap Урок 2. Подключаем Bootstrap Урок 1. Введение в курс «Bootstrap — сетки» Урок 8. Создание версий проекта в Git Урок 4. Основные команды в Git Урок 3. Генерация SSH-ключа для работы с GitHub Урок 5. Применение Git на практике. Часть 1 Урок 2. Подготовка проекта к работе с Git