Full Stack MERN Web Development
Bootstrap Color Modes
Bootstrap is controlled with inline styles. The style call is placed inside the controlling HTML tag.
More information about colors and backgrounds can be found here.
*Also, you can customize the colors. More info can be found here.
Bootstrap Theme Colors Display
We added a page style in the head section to layout basic padding and margin for
this
section.
Each color section is a
< div>
that references this "page style". We then also add the styling for each
color selection, within each individual div tag by adding bg-color and
text-color
If we select both the bg and text colors to the same color, say primary, then we can add
-emphasis to
the end of the text-color designation. This will set a offsetting text color so you can seen the text on
the
background.
for example, in the first blue section, we set class="bg-primary text-primary-emphasis".
the following box is bg-primary
the following box is bg-primary text-primary
the following box is bg-primary text-primary-emphasis
and so on down the list using bg-color text-color-emphasis,
Combing Text and Background Utilities
You can combine the foreground and background colors into a more simplified style call.
Instead of using class="bg-primary text-primary-emphasis", use the simplified version class="text-bg-primary"
This sets, the background color with an "offsetting" foreground color as seen below.