Bootstrap 5 Color
Text Color
Bootstrap 5 has some contextual classes that can be used to provide "meaning through colors".
The classes for text colors are: .text-muted,
.text-primary, .text-success, .text-info,
.text-warning, .text-danger, .text-secondary, .text-white,
.text-dark, .text-body 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.
Secondary text.
Dark grey text.
Body text.
Light grey text.
Background Colors
The classes for background colors are: .bg-primary,
.bg-success, .bg-info, .bg-warning,
.bg-danger, .bg-secondary, .bg-dark and .bg-light.
Example
Background Text color
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.
2. Bootstrap 5 is mobile-first
Bootstrap 5 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.
To ensure proper rendering and touch zooming, add the following <meta> tag inside the
<head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width part sets the width of the page to follow
the
screen-width
of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the
page
is first loaded
by the browser.