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

Содержание

Размер шрифта и высота строки

В Bootstrap 3 в качестве размера шрифта () по умолчанию используется фиксированная величина, равная 14px. Высота строки () имеет значение 1.428. Эти CSS-свойства применяются к элементу страницы .

body {
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

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


body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* размер шрифта */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
}

1rem равен размеру шрифта, который установлен для элемента . Данная единица измерения является относительной, т.к. она зависит от размера шрифта, который установлен для всего документа.

html {
  font-size: 16px;
}

В данном случае будет равен .

Но так как в стилях Bootstrap 4 элементу html явно не устанавливается размер шрифта, то данное значение будет браться из браузера.

Например, в десктопной версии браузера Chrome настройка размера шрифтов осуществляется на странице «Настройки» в разделе «Вид страниц». По умолчанию данное значение равно 16px. Если данное значение, например, увеличить до 18px, то 1rem в Bootstrap 4 будет уже равен 18px.

Изменение размера шрифта

Если вы хотите изменить размер шрифта, т.е. сделать его для некоторого блока больше или меньше, то можете воспользоваться CSS. Для этого необходимо открыть свой файл CSS и написать инструкцию (выбрать элементы и указать им свойство с необходимым значением):

/* в Bootstrap 3: */
/* установить для всей страницы */
body {
  font-size: 16px;
}
/* для установить для элементов с классом main */
.main {
  font-size: 14px;
}
/* в Bootstrap 4: */
body {
  font-size: 1rem;
}
.main {
  font-size: 1.1rem;
}

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

/* текст на мобильной версии меньше, чем на других устройствах */
/* на xs */
body {
  font-size: 14px;
}
/* на sm */
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}
/* на md */
@media (min-width: 992px) {
  html {
    font-size: 18px;
  }
}
/* на lg */
@media (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}

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

Данные единицы зависят от ширины или высоты viewport. = 1% от ширины viewport, — 1% от высоты viewport, — 1% от ширины или высоты, а именно от того значения, которое меньше, — 1% от ширины или высоты, а именно от того значения, которое больше.

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vw;
}
.main {
  font-size: 2vwin;
}

Если какое-то CSS свойство не работает, то вы можете усилить его, добавив к нему :

h1 {
  font-size: 5.9vw !important;
}

Эти варианты можно использовать для создания адаптивных заголовков и текста.

Кроме вышеперечисленных единиц есть ещё (проценты) и . При установке этих единиц нужно быть осторожными, т.к. они устанавливают размер шрифта относительно размера шрифта своего родителя.

Например:

<style>
div {
  font-size: 80%;
}
<style>

...

<!-- например, font-size = 14px -->
<div>
  Контент 1... <!-- 11,2px -->
  <div>
    Контент 2... <!-- 8,96px -->
    <div>
      Контент 3... <!-- 7,168px -->
    </div>
  </div>
</div>

Sass mixins

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for a fast, responsive layout.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

Давайте посмотрим на auto-layout сетку.

Итак, 3 равные колонки. ‘’ остаются горизонтальным на всей широте и не встают вертикально, так как прерывание дефолтно:

<div class="container">    <div class="row">       <div class="col">1</div>      <div class="col">2</div>       <div class="col">3</div>   </div> </div>

3 равные колонки, адаптивные. В этом примере, ‘’ остаются горизонтальным до прерывания на 576px, а затем они становятся вертикальными. Помните, что вы можете заменять sm на каком угодно брейкпоинте(,,), если нужно:

<div class="container">    <div class="row">       <div class="col-sm">1</div>      <div class="col-sm">2</div>       <div class="col-sm">3</div>   </div> </div>

2 колонки, левый сайдбар. А вот пример комбинирования классически определнной ширины колонок с колонками auto-layout. Правая колонка будет автоматически расти, чтобы занять ширину, так как мы используем auto-layout . Сайдбар будет 16.6% ширины на больших экранах и затем встанет над контентом при sm брейкпоинте с 576px:

<div class="container">    <div class="row">       <div class="col-sm-2">sidebar</div>      <div class="col">main content</div>    </div> </div>

3 колонки, правый сайдбар (сокращение, чтобы уместиться): В этом примере есть левый сайдбар, центральная область контента и правый сайдбар, который сокращается по ширине, чтобы подстроиться под свой контент.

<div class="container">    <div class="row">       <div class="col-sm-2">left</div>      <div class="col">main content</div>      <div class="col-auto">right</div>   </div> </div>

Ключевые моменты адаптивного дизайна используемые в сетке Bootstrap 4:

Колонки встанут вертикально и станут шириной во весь экран на устройствах с маленьким разрешением, если вы не используете col-* класс в HTML разметке. Используйте для предотвращения такого вертикального выстраивания.

Классы сеток поменьше, также применяются на больших экранах, пока не перепишутся конкретно под ширину большего экрана. Следовательно, в сущности тоже самое, что и . Следовательно, вам только надо использовать класс для самых маленьких разрешений, которые вам нужно поддерживать.

Строки (row) —имеют и следовательно колонки имеют равную высоту в одном и том же ряду. Используйте или Flexbox и для горизонтального или вертикального выравнивания.

Mix and Match

col-6 col-sm-9 col-6 col-sm-3

col-7 col-lg-8 col-5 col-lg-4

col-sm-3 col-md-6 col-lg-4 col-sm-9 col-md-6 col-lg-8

Example

<!— 50%/50% split on extra small devices and 75%/25% split on larger devices —><div class=»row»>  <div class=»col-6 col-sm-9″>col-6 col-sm-9</div>  <div class=»col-6 col-sm-3″>col-6 col-sm-3</div></div><!— 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices —><div class=»row»>  <div class=»col-7 col-lg-8″>col-7 col-lg-8</div>  <div class=»col-5 col-lg-4″>col-5 col-lg-4</div></div><!— 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) —><div class=»row»>  <div class=»col-sm-3 col-md-6 col-lg-4″>col-sm-3 col-md-6 col-lg-4</div>  <div class=»col-sm-9 col-md-6 col-lg-8″>col-sm-9 col-md-6 col-lg-8</div></div>

Автоматическая разметка колонок

2.1 Колонки одинаковой ширины

С помощью нового универсального класса «.col» можно указать до 12 колонок в ряду (родитель «.row»), ширина которых будет автоматически вычислена в зависимости от количества элементов и будет равна.

Например:

2.2 Установка ширины одной колонки

Вы также можете явно установить ширину одной колонки, а остальные оставить автоматическими.

<div class="row">
	<div class="col">1 из 3</div>
	<div class="col-6">2 из 3 (широкое)</div>
	<div class="col">3 из 3</div>
</div>
<div class="row">
	<div class="col">1 из 3</div>
	<div class="col-5">2 из 3 (широкое)</div>
	<div class="col">3 из 3</div>
</div>

В данном примере второй элемент в третьем ряду имеет класс «.col-6» и второй элемент во втором ряду имеет класс «.col-5», которые занимают соответствующее количество колонок на всех разрешениях экрана. Ширина остальных колонок является отзывчивой и вычисляется автоматически, занимая всё оставшееся пространство.

2.3 Контент переменной ширины

Можно использовать класс «col-{breakpoint}-auto», чтобы определить контент с переменной шириной, в зависимости от занимаемого пространства содержимым колонки. Где breakpoint — размер экрана (xl, lg, md или sm).

<div class="row justify-content-sm-center">
	<div class="col col-md-2">1 из 3</div>
	<div class="col-sm-auto">Контент переменной ширины</div>
	<div class="col col-md-2">3 из 3</div>
</div>
<div class="row">
	<div class="col">1 из 3</div>
	<div class="col-sm-auto">Контент переменной ширины номер два</div>
	<div class="col col-md-2">3 из 3</div>
</div>

Здесь мы видим, что две центральные колонки занимают ширину, соответствующую ширине содержимого, однако в первом ряду благодаря классу «.justify-content-sm-center» у «.row» весь ряд центрируется и общая ширина зависит только от ширины центральной колонки, в то время, как второй ряд растягивается на всю доступную ширину, но вторая колонка остается фиксированной по ширине содержимого.

2.4 Мульти-ряд


Благодаря Bootstrap 4 вы можете сделать в одном ряду несколько строк (переносов). Реализовать это можно с помощью класса «.w-100», который очень похож на тег «br» и по-сути просто делает перенос колонок на новую строку.

<div class="row">
	<div class="col">col</div>
	<div class="col">col</div>
	<div class="w-100"></div>
	<div class="col">col</div>
	<div class="col">col</div>
	<div class="col">col</div>
</div>

Быстрый старт

Хотите использовать Бутстрап в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.

JS

Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода в конце страниц, прямо перед закрывающим . Сперва jQuery , потом Popper.js, потом наши.

Мы используем мини-сборку jQuery, но и полную можно использовать.

Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.

Наши и включают в себя Popper, но не jQuery. Для получения дополнительной информации о том, что входит в Bootstrap, пожалуйста, смотрите наш раздел .

Показать компоненты, требующие JavaScript

  • Уведомления отмены
  • Кнопки изменения состояний и чекбоксов/»радио»
  • Карусель для поведения «слайд», элементы контроля и индикаторы
  • Коллапс для изменения видимости содержимого
  • Выпадающие элементы для отображения и расположения (также требует Popper.js)
  • Модальные окна для отображения, расположения и создания поведения прокрутки
  • Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
  • Выплывающие подсказки и окна для отображения и расположения (также требует Popper.js)
  • Отслеживание прокрутки и обновления навигации

Всё из-за ширины.

В Bootstrap 4 есть 5 адаптивных рядов (ну или брейкпоинтов), которые вы возможно заметили в предыдущем примере. (ie; , ).

Адаптивные брейкпоинты, основаны на ширине экрана:

— ширина экрана < 576px. Это стандарт.

— ширина экрана ≥ 576px

— ширина экрана ≥ 768px

— ширина экрана ≥ 992px

— ширина экрана ≥ 1200px

Почему я заключил () в скобки, а не сделал как с другими брейкпоинтами? Так как xs это дефолтное прерывание, инфикс, который использовался в Bootstrap 3, больше не используется в Bootstrap 4. Так что вместо , просто .

Bootstrap использует медиа запросы из CSS, что установить адаптивные точки прерываний. Они дают вам возможность контролировать поведение колонок при разных размерах экрана.

Для примера: вот 2 колонки, каждая шириной 50%:

<div class="container">    <div class="row">       <div class="col-sm-6">Column 1</div>      <div class="col-sm-6">Column 2</div>    </div> </div>

означает использование 6 колонок из 12, то есть 50% ширины на типичных маленьких размерах экранов. Которые больше или равны 768px:

На экранах меньше, чем 768px, 2 колонки станут шириной 100% и встанут вертикально:

Это происходит, потому что (xs) по дефолту или подразумевает брейкпоинт. Так как я не указывал дефолтную ширину колонки, 50% ширина была применена только на 768px и шире для sm брейкпоинта.

Alignment

You may benefit from flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

For grids that are the same from the smallest of devices to the largest, you may use the and classes. Specify a numbered class when you need a particular sized column; otherwise, feel free to stick to .

No gutters

The gutters between columns in our predefined grid classes can be removed with This removes the negative s from and the horizontal from all immediate children columns.

Need an edge-to-edge design? Drop the parent or class.

In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Column breaks

Breaking columns to a new line in flexbox requires a small hack. Just add an element with wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple s, but not every implementation method can account for this.

With the handful of grid tiers available, you’re bound to run into issues where, at certain breakpoints, your columns don’t clear quite right as one is taller than the other. To fix that, use a combination of a and our responsive utility classes.

Как это работает

На высоком уровне, блочная система работает так:

  • Существует три основных компонента—контейнера, строки и столбцы.
  • Контейнеры— для фиксированной ширины или на полную ширину—центрирует содержание вашего сайта и помогает выровнять содержание блока.
  • «Rows» — горизонтальные группы столбцов, которые обеспечивают чтобы столбцы выстроились правильно.
  • Контент должен быть помещен в столбцах, и только колонки могут быть непосредственными потомками строк.
  • Классы столбце указано количество столбцов, которые вы хотите использовать из 12 возможных в ряду. Так что если вы хотите три равные ширины столбцов, нужно использовать .
  • Столбец устанавливаются в процентах, так они всегда изменчивый и размерами по отношению к родительскому элементу.
  • Столбцы имеют горизонтальную для создания промежутка между отдельными столбцами.
  • Есть пять грид уровней, по одному для каждой : сверхмалые, малые, средние, большие, и очень большие.
  • Грид уровни основываются на минимальной ширине, то есть они применяются к ярусу и всем, кто выше его (например, применим для малых, средних, больших, и очень больших устройств).
  • Вы можете использовать предопределенные грид классов или Sass примеси для более семантической разметки.

Звучит хорошо? Отлично, давайте перейдем посмотрев все это на примерах.

Всё что нужно знать о колонках Bootstrap

Снова не забываем, что колонки должны быть прямыми потомками строк.

И так, колонки создают горизонтальные деления по вьюпорту. Пространство между колонками называется “gutter”.


Классическая сетка Bootstrap имеет 12 колонок:

Таким образом, колонки могут быть равномерно разделены на 12 частей. Вот пример, 6 колонок (12/6=2) :

И дальше уже дело простой математики:

Колонки могут быть разделены с использованием любой части из 12 элементов. И это нормально — использовать меньше 12. И также, это нормально — использовать больше 12-ти, но это я покажу вам дальше.

Учитывая такую гибкость, возможности шаблона кажутся бесконечными.

Responsive classes

Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the and classes. Specify a numbered class when you need a particular sized column; otherwise, feel free to stick to .

Stacked to horizontal

Using a single set of classes, you can create a basic grid system that starts out stacked before becoming horizontal on desktop (medium) devices.

Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

Gutters

Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the and matching padding utilities on the s. The or parent may need to be adjusted too to avoid unwanted overflow, using again matching padding utility.

Here’s an example of customizing the Bootstrap grid at the large () breakpoint and above. We’ve increased the padding with , counteracted that with on the parent and then adjusted the wrapper with .

Row columns

Use the responsive classes to quickly set the number of columns that best render your content and layout. Whereas normal classes apply to the individual columns (e.g., ), the row columns classes are set on the parent as a shortcut.

Use these row columns classes to quickly create basic grid layouts or to control your card layouts.

You can also use the accompanying Sass mixin, :

Привлечение к тексту внимания посредством цвета

В Bootstrap 3 и 4 имеются классы, с помощью которых можно изменить цвет текста, т.е. придать ему дополнительную информацию.

Цвет — это один из способов передачи информации. Bootstrap имеет несколько вспомогательных классов, которые могут быть использованы для придания тексту цветовой окраски. Например, зеленый цвет ассоциируется с успехом, оранжевый – на то, что надо быть осторожным, красный — с опасностью и т.д.

<p class="text-muted">Приглушенный текст</p>
<p class="text-primary">Важный текст</p>
<p class="text-success">Текст успеха</p>
<p class="text-info">Текст примечания</p>
<p class="text-warning">Текст предупреждения</p>
<p class="text-danger">Текст ошибки</p>

Если же вы хотите задать свой цвет тексту, то можете либо создать свои классы, либо установить это действие напрямую с помощью селектора:

/* с помощью класса */
.text-red {
  color: red;
}

/* например, для всех заголовков h3, расположенных в aside */
aside h3 {
  color: #fff;
}

Если же ваш цвет по каким-то причинам не применяется к тексту, то значит, его переопределяют другие CSS-свойства. В этом случае вы можете усилить действие своего CSS-свойства добавив к нему .

/* усиление CSS-свойства color */
aside h3 {
  color: #fff !important;
}

Для того чтобы покрасить часть текста, его необходимо обернуть в элемент и добавить к нему соответствующий класс.

Например:

<p>...<span class="text-success">часть текста</span>...</p>

Параметры сетки

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

  Extra small<768px Small>=768px Medium>=992px Large>=1200px
Class prefix
Suitable for Phones Tablets Small Laptops Laptops & Desktops
Grid behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
# of columns 12 12 12 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column)
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes

Выравнивание

Bootstrap 4 основан на «флексах» и дарит нам все возможности данной модели, которые доступны в простых готовых классах. В числе возможностей — вертикальное и горизонтальное выравнивание.

4.1 Вертикальное выравнивание

<div class="row align-items-start">
	<div class="col">Верх</div>
	<div class="col">Верх</div>
	<div class="col">Верх</div>
</div>
<div class="row align-items-center">
	<div class="col">Середина</div>
	<div class="col">Середина</div>
	<div class="col">Середина</div>
</div>
<div class="row align-items-end">
	<div class="col">Низ</div>
	<div class="col">Низ</div>
	<div class="col">Низ</div>
</div>

Помимо управления выравниванием через родительский «.row», можно выравнивать колонки, задавая им соответствующие классы:

<div class="row">
	<div class="col align-self-start">Верх</div>
	<div class="col align-self-center">Середина</div>
	<div class="col align-self-end">Низ</div>
</div>

4.2 Горизонтальное выравнивание

Кроме того, Bootstrap 4 имеет в своём арсенале инструменты для горизонтального выравнивания колонок при помощи префикса «.justify-content-» у «.row».

<div class="row justify-content-start">
	<div class="col-4">row justify-content-start</div>
	<div class="col-4">row justify-content-start</div>
</div>
<div class="row justify-content-center">
	<div class="col-4">row justify-content-center</div>
	<div class="col-4">row justify-content-center</div>
</div>
<div class="row justify-content-end">
	<div class="col-4">justify-content-end</div>
	<div class="col-4">justify-content-end</div>
</div>
<div class="row justify-content-around">
	<div class="col-4">justify-content-around</div>
	<div class="col-4">justify-content-around</div>
</div>
<div class="row justify-content-between">
	<div class="col-4">justify-content-between</div>
	<div class="col-4">justify-content-between</div>
</div>

4.3 Удаление полей между колонками

Очень часто встречаются ситуации, когда необходимо убрать поля между колонками. Например, если вы создаете галерею и элементы должны быть расположены вплотную, например так:

Для этого достаточно у элемента «.row» задать дополнительный класс «.no-gutters».

<div class="row no-gutters">
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
	<div class="col-6 col-sm-4 col-md-4"><div>col-6 col-sm-4 col-md-4</div></div>
</div>

4.4 Перенос колонок на новую строку

Если ряд (.row) заполняется суммарным количеством колонок более 12-ти, последующая колонка переносится на новую строку.

<div class="row">
	<div class="col-9">.col-9</div>
	<div class="col-4">.col-4<br>9 + 4 = 13 колонок - это больше 12. Данный элемент шириной в 4 колонки будет перенесён на новую строку.</div>
	<div class="col-6">.col-6<br>Следующие колонки расположатся вдоль строки.</div>
</div>

Оформление строчных (inline) текстовых элементов HTML5

Bootstrap содержит стили для основных HTML5 inline элементов: , , , , , , , , и .




…для выделения текста, имеющего актуальность в другом контексте…

для выделения текста, который был удалён из документа

для выделения текста, который потерял уже свою актуальность

для разметки текста, который был добавлен в документ

…для разметки текста, который стилистически отличается от обычного текста (например, является невнятным или содержит ошибки в написании слов) …

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

…для разметки важного текста…

…для разметки текста, который имеет эмоциональную окраску…

для разметки текста, стилистически отличающегося от обычного текста, без передачи ему какого-либо особого значения или значимости (например, для выделения ключевых слов, названий продуктов в обзоре)

для разметки иностранных слов в тексте, технических терминов и другой информации, которая произносится в тексте альтернативным голосом или настроением без эмоциональной окраски

Как сделать текст жирным, наклонным или подчёркнутым

В Bootstrap 4 для этих целей уже есть подготовленные классы , , и .

<p class="font-weight-bold">Жирный текст...</p>
<p class="font-weight-normal">Нормальный (не жирный текст)...</p>
<p class="font-weight-light">Текст, имеющий тонкое начертание...</p>
<p class="font-italic">Курсивный текст...</p>

Если используете Bootstrap 3, то вы их можете добавить следующие стили в свой файл CSS, а затем использовать их в HTML (посредством добавления к элементам необходимых классов):

.font-weight-bold {
  font-weight: 700;
}
.font-weight-normal {
  font-weight: 400;
}
.font-weight-light {
  font-weight: 300;
}
.font-italic {
  font-style: italic;
}
.text-underline {
  text-decoration: underline;
}

Адаптивные классы

3.1 Брейкпоинты

Очень интересная возможность Bootstrap 4 — возможность задавать универсальные колонки, которые будут отображаться на всех разрешениях. Это упомянутый ранее класс «.col». Кроме того, можно определить класс, указывающий конкретное количество колонок, занимаемое содержимым — это классы с префиксом «.col-{число колонок}», например «.col-6» говорит нам о том, что содержимое займёт 6 колонок из 12. В случае, когда конкретное количество задавать не обязательно, можно смело использовать универсальный класс «.col».

<div class="row">
	<div class="col">col</div>
	<div class="col">col</div>
	<div class="col">col</div>
	<div class="col">col</div>
</div>
<div class="row">
	<div class="col-8">col-8</div>
	<div class="col-4">col-4</div>
</div>

3.2 На мобильных устройствах

Вы можете использовать префикс класса «.col-sm-{количество занимаемых колонок}» для того, чтобы задать базовую сетку на всех разрешениях, кроме самых маленьких. На небольших экранах колонки такой сетки будут складываться друг под друга. На разрешениях больше — будут занимать столько места, сколько вы определили в классах.

<div class="row">
	<div class="col-sm-8">col-sm-8</div>
	<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
	<div class="col-sm">col-sm</div>
	<div class="col-sm">col-sm</div>
	<div class="col-sm">col-sm</div>
</div>

Здесь мы видим, что первый ряд на устройствах с разрешением более «sm», то-есть больше, чем 576 пикс. разбивается на 2 колонки — шириной 8 и 4 из 12-ти соответственно. Ширина колонок во втором ряду вычисляется автоматически, но на самых малых разрешениях эти колонки также складываются друг под друга, благодаря классу «.col-sm».

3.3 Создание сложной комбинированной сетки

С помощью Bootstrap вы можете создавать любые комбинации колонок при создании сетки. Для каждой колонки можно задать любое поведение на различных разрешениях с помощью адаптивных классов. Здесь отличия от третьей версии — только в наименованиях классов.

<!-- На мобильных устройствах: Первая колонка - на полную ширину, вторая на половину -->
<div class="row">
	<div class="col-12 col-md-8">.col-12 .col-md-8</div>
	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- На десктопе: 3 колонки по 4 в каждой. На мобильных: все колонки вполовину контейнера -->
<div class="row">
	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
	<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Колонки занимают 6 из 12 колонок на любом разрешении -->
<div class="row">
	<div class="col-6">.col-6</div>
	<div class="col-6">.col-6</div>
</div>

Примеры использования

Рассмотрим примеры использования классов Bootstrap для установления HTML-элементам и оступов.

Пример 1. Установим HTML-элементу padding отступ сверху, равный 3:

<div class="pb-3">
    ...
</div>

Пример 2. Расположим 2 блока по центру. Для этого первому блоку установим в качестве свойства значение auto с помощью класса , а второму — с помощью класса . Кроме этого дополнительно зададим отступ между блоками, с помощью классов и .

<div class="container">
    <div class="row">
        <!-- Первый блок -->        
        <div class="col-4 ml-auto mr-3 bg-success" style="height: 200px;"></div>
        <!-- Второй блок --> 
        <div class="col-4 mr-auto ml-3 bg-danger" style="height: 200px;"></div>
    </div>
</div>

Пример 3. Установим блоку:

  • отступы слева и справа, равные auto ();
  • на отступы сверху и снизу, равные 2 ();
  • на и (т.е. ) отступы сверху и снизу, равные 3 ();
  • на и (т.е. ) отступы сверху и снизу, равные 4 ();
  • на всех контрольных точках отступы для 4 сторон, равные 3 ().
<div class="mx-auto my-2 my-sm-3 my-lg-4 p-3">
    ...
</div>

Пример 4. Установим элементу на отступ снизу, равный 4. На остальных контрольных точках этот отступ уберём, т.е. установим его, равным 0.

<div class="mb-4 mb-sm-0">
    ...
</div>

Пример 5. Установим HTML-элементу:

  • по умолчанию ( >= 0 или ) отступы, равные 0 ();
  • на и следующих контрольных точках отступ слева, равный 3();
  • на и следующих контрольных точках (т.е. ) уберём отступ слева (установим его равным 0, т.е. ) и добавим отступ справа, равный 4 ().
<div class="p-0 pl-sm-3 pl-md-0 pr-sm-4">
    ...
</div>

С этим читают