Bootstrap is a popular front-end framework that allows developers to quickly build responsive web pages and applications. One of the common elements used in Bootstrap is the label component, which displays text and can be styled in different colors. By default, labels use the default text color specified in Bootstrap. However, you may want to change the label text color to fit your design needs. In this article, we will explore different methods to change the text color in Bootstrap labels.
Using Utility Classes
The easiest way to change label text color in Bootstrap is by using the built-in text color utility classes. Bootstrap includes utility classes for setting text to common colors like primary, secondary, success, danger, warning, info, light, dark, muted, and white.
To use these, simply add the class to the label element. For example:
<label class="label label-success">Success Label</label>
This will make the label text green. You can use any of the available text color utility classes like:
<label class="label label-primary">Primary Label</label> <label class="label label-secondary">Secondary Label</label> <label class="label label-danger">Danger Label</label>
The text color utilities provide an easy way to quickly style labels without writing any custom CSS.
Using Custom CSS
For more customization options, you can style the label text color using your own CSS. There are two common ways to do this:
1. Add Custom CSS Class
First, add a custom CSS class to the label element:
<label class="label custom-label">Custom Label</label>
Then in your CSS, target the .custom-label class and set the color property:
.custom-label {
color: #6c757d;
}
This will change the text color to a custom hex value.
2. Style By Element
Alternatively, you can directly target the label element in your CSS:
label {
color: #28a745;
}
This will apply the text color change to all label elements.
The benefit of using custom CSS is that you can use any hex color value or CSS color name.
Changing Color Based on Label State
When working with interactive labels, you may want to change the text color based on the state, for example on hover or focus.
Here is an example using the :hover pseudo-class:
/* Default label color */
label {
color: #333;
}
/* Change color on hover */
label:hover {
color: blue;
}
This will change the label text color to blue when the user hovers over it.
You can use other pseudo-classes like :focus or :active in a similar way.
/* Change color on focus */
label:focus {
color: red;
}
This provides a way to add interactivity and visual feedback when users interact with the labels.
Changing Background Color
In addition to text color, you may also want to customize the background color of labels. This can be done using similar techniques:
/* Utility class */
<label class="label label-primary">Primary</label>
/* Custom CSS */
label {
background-color: #333;
}
label:hover {
background-color: #eee;
}
The background color can be changed using hex values, RGB colors, or CSS color names. Make sure there is sufficient contrast between the text and background colors for accessibility.
Variation with Contextual Classes
Bootstrap includes contextual label classes that apply color styling for common use cases like highlighting statuses:
– label-primary
– label-success
– label-info
– label-warning
– label-danger
For example:
<label class="label label-success">Success Text</label> <label class="label label-danger">Danger Text</label>
This applies green and red styling to indicate a successful or dangerous state.
The contextual classes provide an easy shortcut for styling labels to match common color use cases. The class simply changes the background color by default, but you can override the text color as well using custom CSS.
Combining Custom Colors and Contextual Styling
You can combine custom colors and contextual classes to create more unique styles:
/* Custom green text */
.success-label {
color: #28a745;
}
/* Default contextual styling */
<label class="label label-success success-label">Success Text</label>
This will apply the default green background from the contextual class, while also changing the text to green using a custom CSS class.
You can mix and match utility classes, custom CSS, and contextual classes to get the styling you need.
Changing Font Size
In addition to color, you may want to change the font size of the label text.
Some options for changing the label font size include:
– Using utility classes like .text-small, .text-large
– Adding CSS like:
label {
font-size: 18px;
}
– Using viewport units for responsive sizing:
label {
font-size: 1vw;
}
Make sure to maintain sufficient contrast and legibility when adjusting font size. Avoid very small font sizes below 12px.
Conclusion
Changing the text color in Bootstrap labels can be easily done using:
– Built-in utility classes for common colors
– Custom CSS targeting the label element
– Pseudo-classes to change color on hover/focus
– Contextual classes for stylistic meaning
You can customize the text and background colors, combine utility and custom CSS, and adjust sizing as needed.
Proper contrast between text and background helps maintain legibility and accessibility. Take a mobile-first approach and test responsive sizing for great results across devices.
With all of Bootstrap’s tools and customization options, you have extensive control over styling labels to suit any project’s design needs.
| Method | Example | Notes |
|---|---|---|
| Utility Classes | label label-primary | Quick common colors |
| Custom CSS | label { color: #333; } | Any hex or CSS color |
| Pseudo-classes | label:hover { } | Interactive states |
| Contextual Classes | label label-success | Semantic colors |
This summarizes the key techniques covered in this guide for changing label text color in Bootstrap. The framework provides many options to customize labels to match any design needs.
