Три однакові колонки

Створення трьох однакових по-ширині колонок, які будуть ставати в один ряд на широких та середніх моніторах. На мобільних пристороях, планшетах, ці колонки будуть автоматично складатись.

.col-md-4
.col-md-4
.col-md-4

Три неоднакові колонки

Створення трьох колонок з різною шириною, які будуть ставати в один ряд на широких та середніх моніторах. Пам'ятайте, сума всіх номерів колонок не повинна перевищувати число дванадцять, якщо потрібно щоб вони розташовувались в один ряд. В противному разі колонки будуть відображатись незалежно від пристрою, на якому їх проглядають.

.col-md-3
.col-md-6
.col-md-3

Дві колонки

Створення двох колонок, які будуть ставати в один ряд на широких та середніх моніторах.

.col-md-8
.col-md-4

Одинарна колонка на всю ширину сторінки

Щоб розтягнути певний елемент на всю ширину сторінки, немає необхідності додавати спеціальний клас.


Дві колонки, які вміщують ще дві колонки

Згідно з документацією, створити вкладеність легко — просто вкладіть рядок з колонками у вже існуючий рядок (такі колонки будуть ставати в один ряд на широких та середніх моніторах).

На пристроях розміром з мобільний телефон, планшет або щось вужче, ці колонки (в тому числі і вкладені) будуть складатись.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Поєднання: настільні комп'ютери та мобільні пристрої

Система сітки "Bootstrap 3" має чотири рівні класів: xs (телефони), sm (планшети), md (настільні комп'ютери), та lg (великі настільні комп'ютери). Ви можете поєднувати майже будь-яку комбінацію цих класів, для створення більш динамічних та гнучких макетів.

Кожен рівень класів масштабується, тобто якщо ви плануєте використовувати однакові налаштування і для xs, і для sm, то вам достатньо поєднати ці два класи у відповідному елементі.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Поєднання: настільні комп'ютери, мобільні пристрої та планшети

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Очищення колонок

Очищення обтікання у визначених контрольних точках, щоб запобігти незграбному обгортанню з нерівномірним вмістом.

.col-xs-6 .col-sm-3
Змініть ширину оглядового вікна або прогляньте цей шаблон на телефоні, наприклад.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Скидання offset, push, та pull

Щоб проглянути в яких саме точках скидаються offset, push, та pull, рекомендуємо проглянути код сторінки.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0