Размеры экранов для bootstrap классов (col-md-*, col-xs-* и др.)

В данной статье рассмотрим сетку Bootstrap, классы для размещения элементов и классы для создания адаптивных страниц.

Классы Bootstrap сетки

Сетка bootstap имеет 4 основных класса:

• xs - мобильные телефоны
• sm - планшеты 
• md - компьютеры
• lg - компьютеры с большим монитором

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

Класс xs (очень маленькие телефоны < 768px)

• Ширина контейнера - auto
• Префикс класса - .col-xs-
• Ширина колонки - auto
• Ширина между колонками - 30px (по 15px с каждой стороны)

Класс sm (средние планшеты >= 768px)

• Ширина контейнера - 750px
• Префикс класса - .col-sm-
• Ширина колонки - ~62px
• Ширина между колонками - 30px (по 15px с каждой стороны)

Класс md (средние компьютеры >= 992px)

• Ширина контейнера - 970px
• Префикс класса - .col-md-
• Ширина колонки - ~81px
• Ширина между колонками - 30px (по 15px с каждой стороны)

Класс lg (большие компьютеры >= 1200px)

• Ширина контейнера - 1170px
• Префикс класса - .col-lg-
• Ширина колонки - ~97px
• Ширина между колонками - 30px (по 15px с каждой стороны)

На сайте собраны также модульные сетки для bootstrap3 для графических редакторов