Typography

Auto margins

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (), and pushing two items to the left ().

Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default value. See this StackOverflow answer for more details.

Flex item
Flex item
Flex item

Flex item
Flex item
Flex item

Flex item
Flex item
Flex item

With align-items

Vertically move one flex item to the top or bottom of a container by mixing , , and or .

Flex item
Flex item
Flex item

Flex item
Flex item
Flex item

Global settings

Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the textual utility classes.

• Use a that selects the best for each OS and device.
• For a more inclusive and accessible type scale, we assume the browser default root (typically 16px) so visitors can customize their browser defaults as needed.
• Use the , , and attributes as our typographic base applied to the .
• Set the global link color via and apply link underlines only on .
• Use to set a on the ( by default).

These styles can be found within , and the global variables are defined in . Make sure to set in .

Validation and Errors

Rails normally wraps fields with validation errors in a , but this behaviour isn’t consistent with Bootstrap 4 styling. By default, generations in-line errors which appear below the field. But it can also generate errors on the label, or not display any errors, leaving it up to you.

Inline Errors

By default, fields that have validation errors will be outlined in red and the
error will be displayed below the field. Here’s an example:

<div class="form-group">
  <label class="form-control-label" for="user_email">Email</label>
  <input class="form-control is-invalid" id="user_email" name="user" type="email" value="">
  <small class="invalid-feedback">can't be blank</small>
</div>

You can turn off inline errors for the entire form like this:

<%= bootstrap_form_for(@user, inline_errors: false) do |f| %>
  ...
<% end %>

Label Errors

You can also display validation errors in the field’s label; just turn
on the option. Here’s an example:

<%= bootstrap_form_for(@user, label_errors: true) do |f| %>
  ...
<% end %>

By default, turning on will also turn off
. If you want both turned on, you can do that too:

<%= bootstrap_form_for(@user, label_errors: true, inline_errors: true) do |f| %>
  ...
<% end %>

Alert Messages

To display an error message with an error summary, you can use the
helper. This won’t output anything unless a model validation
has failed.

<%= f.alert_message "Please fix the errors below." %>

Which outputs:

<div class="alert alert-danger">
  <p>Please fix the errors below.</p>
  <ul class="rails-bootstrap-forms-error-summary">
    <li>Email can't be blank</li>
  </ul>
</div>

You can turn off the error summary like this:

<%= f.alert_message "Please fix the errors below.", error_summary: false %>

To output a simple unordered list of errors, use the helper.

<%= f.error_summary %>

Which outputs:

<ul class="rails-bootstrap-forms-error-summary">
  <li>Email can't be blank</li>
</ul>

Errors On

If you want to display a custom inline error for a specific attribute not
represented by a form field, use the helper.

<%= f.errors_on :tasks %>

Which outputs:

<div class="alert alert-danger">Tasks can't be blank.</div>

You can hide the attribute name like this:

<%= f.errors_on :tasks, hide_attribute_name: true %>

Which outputs:

<div class="alert alert-danger">can't be blank.</div>

Internet Explorer 10 на Windows 8 и Windows Phone 8

Интернет Эксплорер 10 не отличает ширину устройства с шириной окна просмотра, и, следовательно, неправильно применяет медиа запросы в CSS Bootstrap. Как правило, вы могли бы просто добавить быстрый фрагмент CSS чтобы исправить это:

Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Обновления 3 (а.к.а. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.

Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.

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

II. Классы и компоненты

глава третья

Оформление контента

• Оформление и работа с текстом
• Стилизация HTML списков
• Средства Bootstrap для оформления изображений

• Оформление HTML таблиц

• CSS для HTML элемента figure

• Классы платформы для HTML форм

• Примеры оформления форм

• Вспомогательные классы

• Оформление заголовков

глава четвёртая

Компоненты

• Breadcrumb (навигационные
  цепочки, хлебные крошки)
• Collapse и создание на базе него
  аккордеона
• Dropdowns (выпадающие
  списки)
• Jumbotron
  (оформление ключевой информации)
• Modal (модальные окна для
  веб-страницы)
• Navs (навигационные
  блоки)
• Navbar (основное меню
  сайта)
• Panels (Bootstrap 3
  панели)
• Popovers (всплывающие панели)
• Scrollspy (выделение ссылок на
  основании положения прокрутки)
• Tabs (Bootstrap 3 вкладки)
• Thumbnails (Bootstrap 3
  галерея)
• Alerts (сообщения)
• Badges (бейджи)
• Buttons (кнопки)
• Carousel (карусель)
• Pagination (навигационный блок для пагинации)
• Progress (индикаторы выполнения)
• Tooltips (всплывающие подсказки)

только для Bootstrap 3

• Иконки Glyphicons
• Affix (sticky-позиционирование
  элементов)

только для Bootstrap 4

• Card (карточка)
• Spinners (Спиннеры)
• Navbar (основное меню)

глава пятая

Классы помощники

• Управление отображением элементов (Bootstrap 4)

• Классы для работы с flexbox (Bootstrap 4)

• Управление margin и padding отступами (Bootstrap 4)

• Управление границами и скруглениями углов элементов (Bootstrap 4)

Containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

Bootstrap comes with three different containers:

• , which sets a at each responsive breakpoint
• , which is at all breakpoints
• , which is until the specified breakpoint

The table below illustrates how each container’s compares to the original and across each breakpoint.

See them in action and compare them in our .

	Extra small<576px	Small≥576px	Medium≥768px	Large≥992px	Extra large≥1200px
	100%	540px	720px	960px	1140px
	100%	540px	720px	960px	1140px
	100%	100%	720px	960px	1140px
	100%	100%	100%	960px	1140px
	100%	100%	100%	100%	1140px
	100%	100%	100%	100%	100%

Responsive

Responsive containers are new in Bootstrap v4.4. They allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply s for each of the higher breakpoints. For example, is 100% wide to start until the breakpoint is reached, where it will scale up with , , and .

Custom Checkbox

To create a custom checkbox, wrap a container element, like <div>, with a
class of and around the checkbox. Then add the to the input with type=»checkbox».

Tip: If you use labels for accompanying text, add the class to it.
Note that the value of the for attribute should match the id of the checkbox:

Custom checkbox

Default checkbox

Example

<form>  <div class=»custom-control custom-checkbox»>   
<input type=»checkbox» class=»custom-control-input» id=»customCheck»
name=»example1″>   
<label class=»custom-control-label» for=»customCheck»>Check this custom
checkbox</label>  </div></form>

Contextual classes

Use contextual classes to color table rows or individual cells.

Class	Heading	Heading
Active	Cell	Cell
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

#	Heading	Heading
1	Cell	Cell
2	Cell	Cell
3	Cell	Cell
4	Cell	Cell
5	Cell	Cell
6	Cell	Cell
7	Cell	Cell
8	Cell	Cell
9	Cell	Cell

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the class.

Create responsive tables by wrapping any with , making the table scroll horizontally at each breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.

Note that since browsers do not currently support , we work around the limitations of and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Модули, navbars, и виртуальные клавиатуры

Переполнение и прокрутка

Поддержка на элемент весьма ограничен в iOS и Android. С этой целью, когда вы прокрутите мимо верхней или нижней части модального в любом из браузеров этих устройств, в контент начнет прокручиваться. Смотрите Хром ошибка № 175502 (исправлено в Chrome и V40) и В WebKit ошибка #153852.

текстовых полей iOS и прокрутки

Начиная с iOS 9.3, в то время как модальные открыт, если начальное касание прокрутки жест в пределах границы текста или В содержание под модальным будет прокручиваться вместо модальных себя. Смотрите В WebKit ошибка № 153856.

Виртуальная клавиатура

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

Bootstrap не обрабатывает такие ошибки, так что вам нужно самим это решить.

Меню Навигации

Элемент не используется на iOS в навигации из-за сложности с z-index. Таким образом, чтобы закрыть выпадающие меню, необходимо просто нажать элемент выпадающего (или ).

Использование сетки

<form>
    <div class="row">
        <div class="col">
            <input type="text" class="form-control" placeholder="Имя">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="Фамилия">
        </div>
        <div class="col">
            <input type="email" class="form-control" placeholder="Почта">
        </div>
        <div class="col">
            <input type="password" class="form-control" placeholder="Пароль">
        </div>
    </div>
</form>

<form>
    <div class="form-row">
        <div class="col">
            <input type="text" class="form-control" placeholder="Имя">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="Фамилия">
        </div>
        <div class="col">
            <input type="email" class="form-control" placeholder="Почта">
        </div>
        <div class="col">
            <input type="password" class="form-control" placeholder="Пароль">
        </div>
    </div>
</form>

<form>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="input-email">Почта</label>
            <input type="email" class="form-control" id="input-email" placeholder="Введите email">
        </div>
        <div class="form-group col-md-6">
            <label for="input-password">Пароль</label>
            <input type="password" class="form-control" id="input-password" placeholder="Введите пароль">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-3">
            <label for="input-zip">Индекс</label>
            <input type="text" class="form-control" id="input-zip" placeholder="Почтовый индекс">
        </div>
        <div class="form-group col-md-3">
            <label for="input-city">Город</label>
            <input type="text" class="form-control" id="input-city" placeholder="Город доставки">
        </div>
        <div class="form-group col-md-6">
            <label for="input-address">Адрес</label>
            <input type="text" class="form-control" id="input-address" placeholder="Адрес доставки">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
</form>

Пример вертикального выравнивания элементов формы. Ширина каждого элемента определяется содержимым:

<form>
    <div class="row align-items-center">
        <div class="col-auto">
            <label for="input-email" class="sr-only">Почта</label>
            <input type="email" class="form-control mb-2" id="input-email" placeholder="Введите email">
        </div>
        <div class="col-auto">
            <label for="input-password" class="sr-only">Пароль</label>
            <input type="password" class="form-control mb-2" id="input-password" placeholder="Введите пароль">
        </div>
        <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" id="remember">
            <label class="form-check-label" for="remember">
                Запомнить
            </label>
        </div>
        <div class="col-auto">
            <button type="submit" class="btn btn-primary mb-2">Войти</button>
        </div>
        <div class="col-auto">
            Поля со звездочкой обязательны
        </div>
    </div>
</form>

Если не использовать класс , то эта форма выглядела бы так:

Static Controls

You can create a static control like this:

<%= f.static_control :email %>

Here’s the output for a horizontal layout:

<div class="form-group">
  <label class="col-sm-2 form-control-label" for="user_email">Email</label>
  <div class="col-sm-10">
    <input class="form-control-plaintext" id="user_email" name="user" readonly="readonly" type="text" value="test@email.com"/>
  </div>
</div>

You can also create a static control that isn’t based on a model attribute:

<%= f.static_control :field_name, label: "Custom Static Control", value: "Content Here" %>

may be any name that isn’t already used in the form. Note that you may get «unpermitted parameter» messages in your log file with this approach.

You can also create the static control the following way, if you don’t need to get the value of the static control as a parameter when the form is submitted:

<%= f.static_control label: "Custom Static Control", value: "Content Here", name: nil %>

(If you neither provide a field name nor , the Rails code that submits the form will give a JavaScript error.)

Prior to version 4 of , you could pass a block to the method.
The value of the block would be used for the content of the static «control».
Bootstrap 4 actually creates and styles a disabled input field for static controls, so the value of the control has to be specified by the option.
Passing a block to no longer has any effect.

Класс для придания изображениям гибкости

Так как Bootstrap предназначен для создания адаптивных сайтов, то изображения при построении такой сетки не должны выходить за пределы своего блока (элемента, в который каждое из них помещено).

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

• в Bootstrap 3;
• в Bootstrap 4.

После этого, размеры изображения будут уменьшаться, если его ширина будет больше ширины элемента, в котором оно находится.

<!-- Bootstrap 3 -->  
<img src="..." class="img-responsive">

<!-- Bootstrap 4 -->  
<img src="..." class="img-fluid">

Эти классы на самом деле выполняют очень простые действия, они применяют к изображению CSS-свойства и .

При необходимости можно не добавлять этот класс к каждому изображению, а выполнить это с помощью CSS. Для этого нужно в свой файл CSS внести одно из следующих CSS-правил:

/* 1 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались как строчно-блочные элементы (inline-block) */
img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

/* 2 способ - сделать все изображения на странице гибкими, при этом чтобы они отображались на странице как блочные элементы (block) */
img {
  display: block;
  height: auto;
  max-width: 100%;
}

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

/* например, сделаем гибкими только те изображения, которые расположены в элементе с классом main */
.main img {
  display: block;
  height: auto;
  max-width: 100%;
  /* дополнительно их выровняем по центру */
  margin-left: auto;
  margin-right: auto;
  /* и добавим внешний нижний отступ */
  margin-bottom: 15px;
}

При необходимости изображениям можно задать определённый размер. Осуществляется это с помощью стандартных атрибутов и :

<!-- Гибкое изображение, имеющее ширину 600 пикселей (Bootstrap 3) -->  
<img src="..." class="img-responsive" width="600">

<!-- Гибкое изображение, имеющее размер 600x800 пикселей (Bootstrap 4) --> 
<img src="..." class="img-fluid" width="600" height="800">

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

Адаптивные таблицы

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

Вертикальной подрезки/усечения

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

Firefox и fieldsets

Firefox имеет какой-то несуразный набор полей для укладки участием что мешает быть таблице адаптивной. Это не может быть изменено без Firefox на конкретные взломать, что мы не дают в Bootstrap:

Для получения дополнительной информации, прочитайте .

#	Таблица Заголовок	Таблица Заголовок	Таблица Заголовок	Таблица Заголовок	Таблица Заголовок	Таблица Заголовок
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

#	Таблица Заголовок	Таблица Заголовок	Таблица Заголовок	Таблица Заголовок	Таблица Заголовок	Таблица Заголовок
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

Обратный стиль

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

Содержание заказа и сложных таблицы

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

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

#	Таблица Заголовок	Таблица Заголовок	Таблица Заголовок	Таблица Заголовок	Таблица Заголовок	Таблица Заголовок
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

Настройка грид

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

Столбцы и промежутки

Число грид столбцами и горизонтальными внутренний отступ (ака, промежутки) может быть изменен через Sass переменные. используется для создания ширины (в процентах) каждого отдельного столбца в то время как делятся поровну между и для водостоков колонки.

Грид уровней

Перемещение за пределы самих колонок, Вы также можете настроить количество грид уровнях. Если вы хотели всего лишь три грид уровней, вы бы обновление и Что-то вроде этого:

При внесении любых изменений в файл Sass переменные или карты, Вам необходимо сохранить изменения и перекомпилировать. Это будет совершенно новый набор предопределенных грид классы для ширины столбцов, смещение, толкает и тянет. Адаптивный ЖКХ видимости также будут обновлены, чтобы использовать пользовательские точки останова.

Bootstrap Radio Buttons

Radio buttons are used if you want to limit the user to just one selection
from a list of preset options.

The following example contains three radio buttons. The last option is disabled:

Example

<div class=»form-check»>  <label class=»form-check-label»>   
<input type=»radio» class=»form-check-input»
name=»optradio»>Option 1 
</label></div><div class=»form-check»>  <label
class=»form-check-label»>    <input type=»radio»
class=»form-check-input» name=»optradio»>Option 2  </label></div>
<div class=»form-check disabled»>  <label class=»form-check-label»>   
<input type=»radio» class=»form-check-input» name=»optradio» disabled>Option 3 
</label></div>

As with checkboxes, use the class if you want the
radio buttons to appear on the
same line:

Example

<div class=»form-check-inline»>  <label class=»form-check-label»>   
<input type=»radio» class=»form-check-input» name=»optradio»>Option 1 
</label></div><div class=»form-check-inline»>  <label
class=»form-check-label»>    <input type=»radio»
class=»form-check-input» name=»optradio»>Option 2  </label></div>
<div class=»form-check-inline disabled»>  <label class=»form-check-label»>   
<input type=»radio» class=»form-check-input» name=»optradio» disabled>Option 3 
</label></div>

Horizontal

Add to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant to make a list group horizontal starting at that breakpoint’s . Currently horizontal list groups cannot be combined with flush list groups.

ProTip: Want equal-width list group items when horizontal? Add to each list group item.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns. Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a as shown below.

Vertical alignment

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

One of three columns

Horizontal alignment

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

One of two columns

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.

Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via attribute selector. While this generates a more specific selector, column padding can still be further customized with spacing utilities.

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

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).

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

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.

.col-9
.col-4Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6Subsequent columns continue along the new line.

Column breaks

Breaking columns to a new line in flexbox requires a small hack: 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.

.col-6 .col-sm-3
.col-6 .col-sm-3

.col-6 .col-sm-3
.col-6 .col-sm-3

You may also apply this break at specific breakpoints with our responsive display utilities.

.col-6 .col-sm-4
.col-6 .col-sm-4

.col-6 .col-sm-4
.col-6 .col-sm-4

Валидация на стороне клиента

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

<form class="needs-validation" novalidate>
    <div class="form-row">
        <div class="col-md-4 mb-3">
            <label for="input-name">Имя</label>
            <input type="text" class="form-control" id="input-name"
                   placeholder="Имя" value="Сергей" required>
            <div class="valid-feedback">Поле заполнено правильно.</div>
        </div>
        <div class="col-md-4 mb-3">
            <label for="input-surname">Фамилия</label>
            <input type="text" class="form-control" id="input-surname"
                   placeholder="Фамилия" value="Иванов" required>
            <div class="valid-feedback">Поле заполнено правильно.</div>
        </div>
        <div class="col-md-4 mb-3">
            <label for="input-email">Почта</label>
                <input type="text" class="form-control" id="input-email"
                       placeholder="Почта" required>
                <div class="invalid-feedback">Это поле обязательно.</div>
        </div>
    </div>

    <div class="form-row">
        <div class="col-md-3 mb-3">
            <label for="input-zip">Почтовый индекс</label>
            <input type="text" class="form-control" id="input-zip"
                   placeholder="Почтовый индекс" required>
            <div class="invalid-feedback">Это поле обязательно.</div>
        </div>
        <div class="col-md-3 mb-3">
            <label for="input-city">Город</label>
            <input type="text" class="form-control" id="input-city"
                   placeholder="Город" required>
            <div class="invalid-feedback">Это поле обязательно.</div>
        </div>
        <div class="col-md-6 mb-3">
            <label for="input-address">Адрес</label>
            <input type="text" class="form-control" id="input-address"
                   placeholder="Адрес" required>
            <div class="invalid-feedback">Это поле обязательно.</div>
        </div>
    </div>

    <button class="btn btn-primary" type="submit">Отправить</button>
</form>

(function() {
    'use strict';
    window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();

Поиск:
Bootstrap • CSS • HTML • Web-разработка • Верстка • Форма • Фреймворк • Form • Валидация

Горизонтальная форма

Вы можете использовать классы сетки Bootstrap для создания горизонтальных форм. Просто укажите, сколько колонок должен занимать каждый элемент. В частности, добавьте класс .row к .form-group и класс .col-*-* или .col-* для каждой колонки.

Вы также должны добавить класс .col-form-label к элементу <label>, чтобы метка относительно текстовых полей расположилась по центру вертикали.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<div class=»container»>
<form>
<div class=»form-group row»>
<label for=»first_name» class=»col-xs-3 col-form-label mr-2″>Имя</label>
<div class=»col-xs-9″>
<input type=»text» class=»form-control» id=»first_name» name=»first_name»>
</div>
</div>
<div class=»form-group row»>
<label for=»last_name» class=»col-xs-3 col-form-label mr-2″>Фамилия</label>
<div class=»col-xs-9″>
<input type=»text» class=»form-control» id=»last_name» name=»last_name»>
</div>
</div>
<div class=»form-group row»>
<div class=»offset-xs-3 col-xs-9″>
<button type=»submit» class=»btn btn-primary»>Отправить</button>
</div>
</div>
</form>
</div>

Bootstrap 4 против Bootstrap 3

Когда речь идёт о горизонтальных формах, имеются некоторые незначительные различия между Bootstrap 4 и Bootstrap 3.

Сетки
При использовании сеток для макета формы, Bootstrap 4 требует класс .row. Этот класс не является обязательным для форм Bootstrap 3 (хотя по прежнему обязателен для сеток Bootstrap 3).
Метки
Bootstrap 4 использует .col-form-label в сетке макета формы, тогда как Bootstrap 3 использует .control-label

Обратите внимание, что Bootstrap 4 изначально использовал .form-control-label, но впоследствии заменил его на .col-form-label.
Класс .form-horizontal
Bootstrap 3 требует класс .form-horizontal, тогда как Bootstrap 4 нет.

Флажки и переключатели

Bootstrap 4 предоставляет классы .form-check, .form-check-label, .form-check-input и .form-check-inline для отображения флажков и переключателей.

Чтобы отобразить флажки или переключатели друг под другом, вложите каждый из них в элемент <div> с классом .form-check. Кроме того, добавьте .form-check-label к элементу <label> и .form-check-input к элементу <input>.

В одну строку

В Bootstrap 4 флажки и переключатели по умолчанию располагаются друг под другом. Вы можете отобразить их в одну строку, добавив .form-check-inline к внешнему <div>. Оставьте .form-check-input в элементе <input>.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»>
<!— Флажки —>
<div class=»form-check form-check-inline»>
<input class=»form-check-input» type=»checkbox» id=»inlineCheckbox1″ value=»1″>
<label class=»form-check-label»>1</label>
</div>
<div class=»form-check form-check-inline»>
<input class=»form-check-input» type=»checkbox» id=»inlineCheckbox2″ value=»2″>
<label class=»form-check-label»>2</label>
</div>
<div class=»form-check form-check-inline»>
<input class=»form-check-input» type=»checkbox» id=»inlineCheckbox3″ value=»3″>
<label class=»form-check-label»>3</label>
</div>
<!— Переключатели —>
<div class=»form-check form-check-inline»>
<input class=»form-check-input» type=»radio» name=»inlineRadioOptions» id=»inlineRadio1″ value=»1″>
<label class=»form-check-label»>1</label>
</div>
<div class=»form-check form-check-inline»>
<input class=»form-check-input» type=»radio» name=»inlineRadioOptions» id=»inlineRadio2″ value=»2″>
<label class=»form-check-label»>2</label>
</div>
<div class=»form-check form-check-inline»>
<input class=»form-check-input» type=»radio» name=»inlineRadioOptions» id=»inlineRadio3″ value=»3″>
<label class=»form-check-label»>3</label>
</div>
</div>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 для отображения флажков и переключателей использует .radio, .radio-inline, .checkbox или .checkbox-inline. Bootstrap 4 использует .form-check, .form-check-label, .form-check-input и .form-check-inline.