Bootstrap Custom Utilities — How to Add Your Own Utility Classes
Bootstrap Custom Utilities let you extend Bootstrap’s default helper classes with your own simple utilities. Here’s how to create custom utility classes step by step.
How to Create Bootstrap Custom Utilities
/* Custom Text Shadow Utility */
.text-shadow {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
How Bootstrap Custom Utilities Work
This Bootstrap Custom Utilities example adds a .text-shadow helper. You can use it in your HTML just like any built-in Bootstrap class.
Why Use Bootstrap Custom Utilities
Bootstrap Custom Utilities keep your markup clean and reusable by avoiding inline styles for small tweaks.
Common Mistake in Bootstrap Custom Utilities
Don’t forget to include your custom CSS after Bootstrap’s CSS, so your custom utilities override properly.
Pro Tip for Bootstrap Custom Utilities
If you’re using SCSS, add your custom utilities directly into Bootstrap’s utilities map for full integration.
1 thought on “Bootstrap Custom Utilities”