3.1. Создаем столбцы в Bootstrap

Когда вы создаёте макет, вы как-то ограничиваете контент в нём, то есть создаёте container.

В Bootstrap он тоже есть, .container устанавливает max-width в каждой контрольной точке. Класс .container-fluid охватывает всю ширину вашего экрана.

После того как мы создали container, давайте зададим сетку.

Сетка создаётся при помощи классов .row и .col, в сеточной системе 12 столбцов.

(Примечание: без класса .row, использование класса .col невозможно)

Пример:

<div class="row">
    <div class="col"> 1 колонка </div>
    <div class="col"> 2 колонка </div>
    <div class="col"> 3 колонка </div>
</div>    

В примере выше, будет создана строка из 3 колонок, автоматически занимающая 12 столбцов, 1 колонка (4 столбца), т.е. 4 + 4 + 4 = 12.

Если вам нужно создать 4 колонки, и чтобы они занимали по 3 столбца, можно написать так, как в примере:

<div class="row">
    <div class="col-3"> 1 колонка </div>
    <div class="col-3"> 2 колонка </div>
    <div class="col-3"> 3 колонка </div>
    <div class="col-3"> 4 колонка </div>
</div>    

Теперь сформируются 4 колонки по 3 столбца.

Не так уже и сложно, верно?

Задание:

Сделайте 4 колонки, которые будут занимать:

• 1 колонка - 2 столбца;
• 2 колонка - 4 столбца;
• 3 колонка - 3 столбца;
• 4 колонка - 3 столбца.

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