Bootstrap
What is the difference between text-body-secondary and text-secondary? #40650
-
|
What's the difference between |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
I've created a CodePen to visualize the differences and serve as a reference. To display normal text, such as paragraphs, articles, long sections, etc. you’ll typically use However, the concepts of primary and secondary colors are different. These terms are used to define your brand’s primary and secondary colors. In Bootstrap, primary is blue, and secondary is black. In my example, if you want to create a tag, you’ll have a primary tag with a subtle primary background, primary border, and primary text. The same applies to your secondary color, which corresponds to the This can be confusing for users who do not customize Bootstrap, as the secondary color is gray and often used for regular text. However, for a different brand, the secondary color could be yellow. In that case, your The semantics are important. Additionally, in our current implementation, |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your detailed explanation! I still have some questions:
|
Beta Was this translation helpful? Give feedback.
-
By default, we define
Classes like
The choice depends on your use cases across different color modes. If you don't need to accommodate color mode changes, you can use basic classes like |
Beta Was this translation helpful? Give feedback.
I've created a CodePen to visualize the differences and serve as a reference.
To display normal text, such as paragraphs, articles, long sections, etc. you’ll typically use
.text-body. If you need lighter text, you can use.text-body-secondary, and for even lighter text,.text-body-tertiary. Even if you customize Bootstrap, it's likely that.text-body-*will remain shades of black in light mode.However, the concepts of primary and secondary colors are different. These terms are used to define your brand’s primary and secondary colors. In Bootstrap, primary is blue, and secondary is black. In my example, if you want to create a tag, you’ll have a primary tag with a subtle primary backgrou…