BodinglesTM - -   Bright Lightbulb Graphic Ideas   - -

Full Stack MERN Web Development

Back to Bootstrap Index

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

bg-primary | Primary Color Section

the following box is bg-primary text-primary

bg-primary text-primary | Primary Color Section

the following box is bg-primary text-primary-emphasis

bg-primary text-primary-emphasis | Primary Color Section

and so on down the list using bg-color text-color-emphasis,

Secondary Color Section
Success Color Section
Danger Color Section
Warning Color Section
Info Color Section
Light Color Section
Dark Color Section


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.

Primary with contrasting color
Secondary with contrasting color
Success with contrasting color
Danger with contrasting color
Warning with contrasting color
Info with contrasting color
Light with contrasting color
Dark with contrasting color

Back to Top