Цвета текста
Bootstrap 4 имеет некоторые контекстные классы, которые могут быть использованы для обеспечения «значение через цвета».
Классы для текстовых цветов: .text-muted , .text-primary , .text-success , .text-info , .text-warning , .text-danger , .text-secondary , .text-white , .text-dark , .text-body (цвет тела по умолчанию/часто черный) и .text-light :
Пример
Этот текст отключен.
Этот текст важен.
Этот текст указывает на успех.
Этот текст представляет некоторую информацию.
Этот текст представляет предупреждение.
Этот текст представляет опасность.
Контекстные текстовые классы также можно использовать для ссылок, которые добавят более темный цвет наведения:
Пример
Вы также можете добавить 50% непрозрачность для черного или белого текста с .text-black-50 или .text-white-50 классов:
Пример
Black text with 50% opacity on white background
White text with 50% opacity on black background
Цвета фона
Для цветов фона используются следующие классы: .bg-primary . .bg-success .bg-info .bg-warning .bg-danger .bg-secondary .bg-dark и .bg-light .
Обратите внимание, что цвета фона не задается цвет текста, поэтому в некоторых случаях вы хотите использовать их вместе с .text-* классом.
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Color
Contextual text >.text-white and .text-muted class has no additional link styling beyond underline.
Background color
Similar to the contextual text color >color , so in some cases you’ll want to use .text-* utilities.
Background gradient
When $enable-gradients is set to true, you’ll be able to use .bg-gradient- utility >$enable-gradients is disabled and the example below is intentionally broken. This is done for easier customization from the moment you start using Bootstrap. Learn about our Sass options to enable these classes and more.
Dealing with specificity
Conveying meaning to assistive technologies
Using color to add meaning only prov >.sr-only class.
Text Colors
Bootstrap 4 has some contextual classes that can be used to provide «meaning through colors».
The >.text-muted , .text-primary , .text-success , .text-info , .text-warning , .text-danger , .text-secondary , .text-white , .text-dark , .text-body (default body color/often black) and .text-light :
Example
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Light grey text.
Contextual text classes can also be used on links, which will add a darker hover color:
Example
You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:
Example
Black text with 50% opacity on white background
White text with 50% opacity on black background
Background Colors
The >.bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark and .bg-light .
Note that background colors do not set the text color, so in some cases you’ll want to use them together with a .text-* class.
Example
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.
COLOR PICKER
HOW TO
SHARE
CERTIFICATES
Your Suggestion:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Web Certificates
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2019 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.