Система сеток Bootstrap 4

Grid System (Грид-система) или система сеток Bootstrap 4 это одно из важных понятий в Bootstrap, Система сетки позволяет распределить компоненты на пользовательском интерфейсе. а так же как ваш вебсайт будет отображаться на различных устройствах. о Грид-система (Grid System) у Bootstrap имеет много строк, но они имеют 12 фиксированных столбцов. В ячейках (cell) вы можете расположить компоненты интерфейса. Система сеток Bootstrap позволяет создавать продвинутые макеты с использованием рядов и колонок.
Bootstrap 4 имеет 5 разных Css-class для отображения на различных экранах:

Css Class Prefix	Описание
.col-	Для очень маленьких устройств (Extra Small), с шириной менее 576px
.col-sm-	Для маленьких устройств (Small), с шириной более или равной 567px.
.col-md-	Для средних устройств (Medium), с шириной более или равной 768px
.col-lg-	Для больших устройств (Large), с шириной более или равной 992px
.col-xl-	Для очень больших устройств (Extra Large), с шириной более или равной 1200px.

Простой пример сетки Bootstrap 4:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
  crossorigin="anonymous">
<!-- Стили (чтобы мы видели сетку) -->
<style>
.bs-example  div[class^="col"] {
  border: 1px solid white;
  background: #f5f5f5;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
}
</style>

<div class="bs-example">
  <!-- Сетка Bootstrap -->
  <div class="row">
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
    <div class="col-sm-1">.col-sm-1</div>
  </div>
  <div class="row">
    <div class="col-sm-2">.col-sm-2</div>
    <div class="col-sm-3">.col-sm-3</div>
    <div class="col-sm-7">.col-sm-7</div>
  </div>
  <div class="row">
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm-5">.col-sm-5</div>
    <div class="col-sm-7">.col-sm-7</div>
  </div>
  <div class="row">
    <div class="col-sm-6">.col-sm-6</div>
    <div class="col-sm-6">.col-sm-6</div>
  </div>
  <div class="row">
    <div class="col-sm-12">.col-sm-12</div>
  </div> 
</div>

Числа в конце каждого имени класса означают количество занимаемых колонок.
Так, .col-sm-1 занимает одну колонку, а .col-sm-8 — восемь.
sm (от слова small — маленький) означает, что колонка применяется к небольшим устройствам и всему выше. Вы также можете использовать
md (от medium — средний),
lg (large — большой) и
xl (extra large — очень большой) для средних, больших и очень больших размеров.
Для сверхмалых устройств средняя часть в имени опускается.
Например, .col-8 занимает восемь колонок на очень маленьких устройствах и выше (другими словами, на всех устройствах).

Класс col-sm-*

sm: это аббревиатура "Small", которая имеет в виду устройства с маленькими экранами, с шириной экрана более или равной 567px. (Для устройств с шириной экрана менее 567px называется очень маленький (extra small)).
Теперь взглянем на конкретный пример:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-sm-3 bg-primary">
               <p>col-sm-3</p>
            </div>
            <div class ="col-sm-9 bg-success">
               <p>col-sm-9</p>
            </div>
         </div>
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

Как ведёт себя сетка в браузере при масштабировании:

Если ".container" (контейнер) имеет ширину >= 567px, элементы ".col-sm-*" будут расположены в ряд (row), и заполнят (fill) ширину .container.
Но если ширина .container меньше 567px, элементы ".col-sm-*" будут расположены на разных рядах, и все равно заполнят (fill) ширину .container. Заключаем, что 567px имеет особенное значение элементов ".col-sm-*":

Класс col-md-*

md: Это аббревиатура "Medium", которая говорит о том, что устройство имеет среднюю ширину, более или равно 768px, это размер планшетов (Tablet).Давайте взглянем на пример:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-md-2 bg-primary">
              <p>col-md-2</p>
            </div>
            <div class ="col-md-3 bg-secondary">
               <p>col-md-3</p>
            </div>
            <div class ="col-md-7 bg-success">
               <p>col-md-7</p>
            </div>
         </div>
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

То как отображается класс col-md в браузере:

Значение в 768px особенно для элементов ".col-md-*". Это так называемая точка останова, при которой меняется отображение интерфейса.

Класс col-lg-, col-xl-

lg: Это аббревиатура "Large", говорит об устройствах с шириной экрана более или равной 992px.
xl: Это аббревиатура"Extra Large", говорит об устройствах с шириной экрана более или равной1200px.Принцип работы ".col-lg-*"& ".col-xl-*" похож на ".col-sm-*", ".col-md-*".

Класс col-*

С устройствами с шириной менее 567px, называются очень маленькими устройствами (extra small).Взглянем на пример:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-2 bg-primary">
              <p>col-2</p>
            </div>
            <div class ="col-3 bg-secondary">
               <p>col-3</p>
            </div>
            <div class ="col-7 bg-success">
               <p>col-7</p>
            </div>
         </div>
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

Пример в окне браузера;

Элементы ".col-*" все еще расположены в ряд (row), несмотря на то, что вы уменьшили ширину ".container". Но вы не можете сделать ширину ".container" менее 320px.

Сочетание col-sm-,col-md-, ..

Элемент (element) может использовать сочетание классов col-*, col-sm-*, col-md-*... друг с другом. Ниже вы видите способ как в Bootstrap 4 применяются эти классы.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col-md-2 col-sm-6 bg-primary">
              <p style="font-style:italic;">col-md-2</p>
              <p style="font-weight:bold;">col-sm-6</p>
            </div>
            <div class ="col-md-10 col-sm-6 bg-success">
               <p style="font-style:italic;">col-md-10</p>
               <p style="font-weight:bold;">col-sm-6</p>
            </div>
         </div>
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

Сочетание col, col-sm, col-md, col-lg, col-xl

Примеры выше показывают Вам как использовать классы col-*, col-sm-*, col-md-*, col-lg-*, col-xl-* (определяя ширину). Пример ниже показывает способ использования классов col, col-sm, col-md, col-lg, col-xl(не определяя ширину):

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <div class= "container-fluid">
         <div class= "row">
            <div class ="col bg-primary">
              <p>col</p>
            </div>
            <div class ="col bg-secondary">
               <p>col</p>
            </div>
            <div class ="col bg-success">
               <p>col</p>
            </div>
         </div>
 
         <hr>
 
         <div class= "row">
            <div class ="col bg-primary">
              <p>col</p>
            </div>
            <div class ="col bg-secondary">
               <p>col</p>
            </div>
            <div class ="col-2 bg-success">
               <p>col-2</p>
            </div>
         </div>
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

Сочетание col-auto, col-sm-auto, col-md-auto, col-lg-auto, col-xl-auto

Элементы(element) использующие класс *-autoбудут иметь много ширин автоматически основываясь на длине его содержания.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <style>
         p  {
           font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div class= "container-fluid">
 
        <div class= "row">
           <div class ="col bg-primary">
             <p>col</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col bg-secondary">
              <p>col</p>
              Short Content
           </div>
           <div class ="col-2 bg-success">
              <p>col-2</p>
           </div>
        </div>
 
        <hr>
 
        <div class= "row">
           <div class ="col-auto bg-primary">
             <p>col-auto</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col-auto bg-secondary">
              <p>col-auto</p>
              Short Content
           </div>
           <div class ="col-2 bg-success">
              <p>col-2</p>
           </div>
        </div>
 
        <hr>
 
         <div class= "row">
            <div class ="col-auto bg-primary">
              <p>col-auto</p>
              Long content .... .... .. .. .. ...... ..... Long content .... .... .. .. .. ...... .....
            </div>
            <div class ="col-auto bg-secondary">
               <p>col-auto</p>
               Short Content
            </div>
            <div class ="col-2 bg-success">
               <p>col-2</p>
            </div>
         </div>
 
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
 
</html>

col-sm-auto

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Grid Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
      <style>
         p  {
           font-weight: bold;
         }
      </style>
   </head>
   <body>
      <div class= "container-fluid">
 
        <div class= "row">
           <div class ="col-sm bg-primary">
             <p>col-sm</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col-sm bg-secondary">
              <p>col-sm</p>
              Short Content
           </div>
           <div class ="col-sm-2 bg-success">
              <p>col-sm-2</p>
           </div>
        </div>
 
        <hr>
 
        <div class= "row">
           <div class ="col-sm-auto bg-primary">
             <p>col-sm-auto</p>
             Long content .... .... .. .. .. ...... .....
           </div>
           <div class ="col-sm-auto bg-secondary">
              <p>col-sm-auto</p>
              Short Content
           </div>
           <div class ="col-sm-2 bg-success">
              <p>col-sm-2</p>
           </div>
        </div>
 
        <hr>
 
         <div class= "row">
            <div class ="col-sm-auto bg-primary">
              <p>col-sm-auto</p>
              Long content .... .... .. .. .. ...... ..... Long content .... .... .. .. .. ...... .....
            </div>
            <div class ="col-sm-auto bg-secondary">
               <p>col-sm-auto</p>
               Short Content
            </div>
            <div class ="col-sm-2 bg-success">
               <p>col-sm-2</p>
            </div>
         </div>
 
      </div>
 
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
 
</html>

Как создать Gallery используя Grid систему

Например у вас есть элемент ".row", и 2 подэлемента ".col-**" с общим количеством столбцов более 12, что произойдет в этом случае?

Ответ: 2 подэлемента будут отображены на 2 разных строках.

<!-- 5 + 8 > 12 -->
<div class= "row">
   <div class ="col-5 bg-primary">
      <p>col-5</p>
   </div>
   <div class ="col-8 bg-secondary">
      <p>col-8</p>
   </div>
</div>

<div class= "container-fluid">
   <h4>(col-sm-*) 5 + 8 > 12</h4>
 
   <!-- (col-sm-*) 5 + 8 > 12 -->
   <div class= "row">
      <div class ="col-6 col-sm-5 bg-primary">
         <p>.col-6 <b>.col-sm-5</b></p>
      </div>
      <div class ="col-6 col-sm-8 bg-secondary">
         <p>.col-6 <b>.col-sm-8</b></p>
      </div>
   </div>
 
</div>

col-12, col-*-12

Например у вас есть элемент ".row"и некоторые подэлементы, подэлемент имеет количество столбцов равное 12. Что произойдет?

Ответ: подэлемент с количеством столбцов 12 будет отображено на одной строке, он заполнит ширину строки.

<div class= "container-fluid">
   <h4>Element with 12 columns</h4>
     
   <div class= "row">
      <div class ="col-2 bg-primary">
         <p>.col-2</p>
      </div>
      <div class ="col-12 bg-secondary">
         <p>.col-12</p>
      </div>
      <div class ="col-5 bg-danger">
         <p>.col-5</p>
      </div>
   </div>
</div>

Gallery. Галерея с использованием сетки Bootstrap 4

Используя свойства Grid выше, поможет вам создать красивую Gallery(Галлерею), которая меняется на основании размера устройства.

<div class= "container-fluid">
   <h4>Gallery</h4>
 
   <div class= "row">
      <div class ="col-12 col-sm-6 col-md-4 bg-primary">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-secondary">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-danger">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-success">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-info">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
      <div class ="col-12 col-sm-6 col-md-4 bg-dark">
         <p>.col-12 .col-sm-6 .col-md-4</p>
      </div>
   </div>
</div>

Более сложный пример использования Grid для создания Gallery.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Grid</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <style>
         .height100 {
         height: 100%;
         }
      </style>
   </head>
   <body>
      <div class= "container-fluid">
         <h4>Complex Gallery</h4>
         <div class= "row d-inline-flex">
            <!-- Gallery Item 1 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal1.png"/>
                  </div>
                  <h2>Sheep</h2>
                  <p>Info..</p>
               </div>
            </div>
            <!-- Gallery Item 2 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal2.png"/>
                  </div>
                  <h2>Horse</h2>
               </div>
            </div>
            <!-- Gallery Item 3 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal3.png"/>
                  </div>
                  <h2>Duck</h2>
               </div>
            </div>
            <!-- Gallery Item 4 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal4.png"/>
                  </div>
                  <h2>Goat</h2>
               </div>
            </div>
            <!-- Gallery Item 5 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal5.png"/>
                  </div>
                  <h2>Chicken</h2>
               </div>
            </div>
            <!-- Gallery Item 6 -->
            <div class ="col-12 col-sm-6 col-md-4 p-2">
               <div class="d-flex flex-column text-center border height100">
                  <div>
                     <img src="../images/animal6.png"/>
                  </div>
                  <h2>Cow</h2>
               </div>
            </div>
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

В примере использованы некоторые утилитарные классы Bootstrap. такие как: .d-flex, .flex-column .p-2

В Bootstrap 4, класс w-100 делает элемент (element) с заполняемой шириной .container (width = 100%), он делит элементы слева и справа на 2 разные строки (row). Но в основном все эти элементы имеют один родительский элемент ( .row)

<div class= "container-fluid">
   <div class= "row">
      <div class ="col bg-primary">
         col (1)
      </div>
      <div class ="col bg-secondary">
         col (2)
      </div>
       
      <div class ="w-100"></div>
       
      <div class ="col bg-success">
         col (3)
      </div>
      <div class ="col-3 bg-danger">
         col-3 (4)
      </div>
   </div>
</div>

Почему Bootstrap создает классы .w-100, почему не использует 2 класса .row для получения тех же результатов?

1. С классом .w-100 вы можете поменять элементы изображенные на 2 строках в 1 строку, и обратно. Например у вас есть 5 элементов (element) расположены в одном .container. И вы хотите, чтобы если ширина была .container < 567px,то они изображались на 2 строках. Если наоборот, то чтобы они изображались на одной строке.

<div class= "container-fluid">
   <div class= "row">
 
      <div class ="col bg-primary">
         <p>col (1)</p>
      </div>
      <div class ="col bg-secondary">
         <p>col (2)</p>
      </div>
 
      <!-- d-sm-none: display sm none -->
      <div class ="w-100 d-sm-none"></div>
 
      <div class ="col bg-success">
         <p>col (3)</p>
      </div>
      <div class ="col-3 bg-danger">
         <p>col-3 (4)</p>
      </div>
      <div class ="col bg-warning">
         <p>col (5)</p>
      </div>
   </div>
 
</div>

2. Вы можете поменять порядок элементов если они принадлежат одному ".row". Вы не можете поменять порядок элементов, если они расположены на 2 разных ".row".

<div class= "container-fluid">
 
   <div class= "row">
      <div class ="col order-sm-12 bg-primary">
         <p>col (1)</p>
         <p>order-sm-12</p>
      </div>
      <div class ="col order-sm-11 bg-secondary">
         <p>col (2)</p>
         <p>order-sm-11</p>
      </div>
 
      <!-- d-sm-none: display sm none -->
      <div class ="w-100 d-sm-none"></div>
 
      <div class ="col order-sm-2 bg-success">
         <p>col (3)</p>
         <p>order-sm-2</p>
      </div>
      <div class ="col-3 order-sm-3 bg-danger">
         <p>col-3 (4)</p>
         <p>order-sm-3</p>
      </div>
      <div class ="col  order-sm-1 bg-warning">
         <p>col (5)</p>
         <p>order-sm-1</p>
      </div>
   </div>
 
</div>

Размеры сетки

В следующей таблице показано, как различные параметры сетки работают с разными размерами области просмотра. Обратите внимание, что Bootstrap 4 теперь использует пятиуровневую систему сетки(в отличие от четырёхуровневой в Bootstrap 3).

Обратите внимание, что Bootstrap 4 теперь использует пятиуровневую систему сетки (в отличие от четырёхуровневой в Bootstrap 3).

Что надо знать про сетки

Контейнеры

Сетки должны размещаться в контейнере (с помощью класса .container или .container-fluid) для правильных отступов и выравнивания.

Ряды и колонки

Ряды содержат один или несколько колонок, в колонах хранится содержимое. Только колонки могут быть непосредственными потомками рядов.

Padding

Колонки содержат padding, однако для первой и последней колонок padding компенсируется отрицательным margin для ряда. Вот почему вышеприведённые примеры содержат изъян — содержимое внутри сетки выравнивается с содержимым вне сетки.

Более 12 колонок на строку?

Если в ряду размещается более 12 колонок, то они переносятся на новую строку, при этом колонки переносятся группой. Например, если ряд содержит col-md-10 и col-md-3, то весь col-md-3 будет перенесён на новую строку.

Менее 12 столбцов на строку?

Вам не нужно задействовать все 12 столбцов, можете использовать любое количество колонок, вплоть до 12. К примеру, у вас может быть ряд, в которой общее число колонок равно трём.

Классы сетки

Классы сетки применяются к устройствам с шириной экрана, больше или равной размерам точек останова, и переопределяют классы сетки, предназначенных для небольших устройств. Поэтому использование любого класса .col-sm- *повлияет не только на маленькие области просмотра, но и на средние, большие и очень большие (кроме случаев, когда также присутствует col-md-*, col-lg-*, col-xl-*).

Несколько классов

Вы можете включить несколько классов размера для данного элемента. Например, вы можете использовать class="col-sm-10 col-md-6", тем самым указать 10 колонок для маленьких экранов и 6 колонок для средних и больших экранов.