Классы Colors в Bootstrap 4. Задаём цвет блокам, текстам, кнопкам, таблицам...

Публикация размещена: 21-05-2019  Просмотров: 94 

Классы Colors в Bootstrap 4. Задаём цвет блокам, текстам, кнопкам, таблицам...
Рассмотрим классы Colors в Bootstrap 4. При верстке шаблонов работать с ними приходится наиболее часто.
Данные классы предназначены для покраски блоков, текстов, кнопок, таблиц и т.д. Они уже встроены в исходник и практически дублируют классы Bootstrap 3, но их стало больше.
Примеры кодов отображаются несколько некорректно из-за того, что данный сайт построен на Bootstrap 3, а коды приведены для версии Bootstrap 4.3.1

Классы с префиксом text-- окрашивают только текст:

<p class="text-primary">text-primary</p>

text-primary - Пример

<p class="text-secondary">text-secondary</p>

text-secondary - Пример

<p class="text-success">text-success</p>

text-success - Пример

<p class="text-danger">text-danger</p>

text-danger - Пример

<p class="text-warning">text-warning</p>

text-warning - Пример

<p class="text-info">text-info</p>

text-info - Пример

<p class="text-light bg-dark">text-light</p>

text-light - Пример

<p class="text-dark">text-dark</p>

text-dark - Пример

<p class="text-body">text-body</p>

text-body - Пример

<p class="text-muted">text-muted</p>

text-muted - Пример

<p class="text-white bg-dark">text-white</p>

text-white - Пример

<p class="text-black-50">text-black-50</p>

text-black-50 - Пример

<p class="text-white-50 bg-dark">text-white-50</p>

text-white-50 - Пример


Если вы хотите покрасить блок то необходимо использовать префикс bg- вместо text-:

bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-white
bg-transparent

Вставляете в нужное место следующие коды:

Для окраски текста:
<p class="text-danger">Внимание</p> или <span class="text-danger">Внимание</span>
Получается: Внимание

Таким же образом для блока, но префикс text- заменяете на bg-

Вы просматриваете: » » Классы Colors в Bootstrap 4. Задаём цвет блокам, текстам, кнопкам, таблицам...