Bootstrap сетка

Bootstrap сетка — заранее прописанный набор CSS-классов, который позволяет расположить столбцы и блоки в сеточный формат. Сеточная модель применяется и в других фреймворках (например, 960grid); строиться  она на медиа-запросах (Media queries). Минимальным размером сетки является размер одной колонки, а вся ширина контейнера страницы состоит из двенадцати колонолок.  Контейнер сетки Bootstrap должен иметь класс .container или .container-fluid, а внутри него контейнер с классом .row и элементами с классами, начинающимися с «col». После обозначениея «col» идет краткое обозначение размера устройства для отображения; следом идет число от 1 до 12 — ширина текущего блока в ширинах отдельных колонок.

Bootstrap сетка

	Экстра МАЛЕНЬКИЕ УСТРОЙСТВА смартфоны (<768px)	МАЛЕНЬКИЕ УСТРОЙСТВА планшеты (<=768px)	Средние устройства  десктопы (≥992px)	Большие устройства  десктопы (<=1200px)
Поведение сетки	Все время горизонтальная	Схлопывается в горизонтальную ближе к точке останова
Ширина контейнера	нет (auto)	750px	970px	1170px
Префикс класса	.col-xs-	.col-sm-	.col-md-	.col-lg-
# колонок	12
Ширина колонки	Auto	~62px	~81px	~97px
Ширина отступа	30px (15px на каждую сторону колонки)
Вложения	доступны
Смещения	доступны
Сортировка колонок	Доступна

Например, можно создать две колонки с разными ширинами для разных устройств просмотра:

<div class="container-fluid">
 <div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
 </div>
</div>

При этом div  с классом col-md-4, означает, что получится колонка/столбец шириной 4/12 от общей ширины контейнера страницы. Если сумма чисел у классов колонок будет превышать 12, колонки будут отображаться с новой строки. При этом классы .col-xs-* обозначают очень маленькие устройства (extra small), .col-sm-* маленькие, .col-md-* средние, .col- lg-* большие. Само определение размера устройства происходит на основе медиа-запросов. Каждому из классу из наборов ставится приблизительная им точная ширина, в зависимости от ширины контейнера.

Для отмены последствий работы свойства float используется класс .clearfix. Если понадобится расположить столбец, пропустив некоторое расстояние кратное ширине одного столбца, используются классы типа .col-md-offset-*, где вместо звёздочки указывается кол-во пропускаемых столбцов для устройств среднего размера (md — middle).

Если вам понадобиться разбить колонку на собственный набор колонок, то прописав класс .row, мы получим еще одно деление рассматриваемой области на двенадцать частей.

Визуальное расположение колонок и расположение в HTML-файле может понадобиться изменить. Это реализуется классами .col-md-push-* и .col-md-pull-*.