Utility Classes
Utility classes are predefined CSS classes that help you apply styles quickly and consistently across your application. They promote a utility-first approach to styling, allowing you to build designs directly in your markup without writing custom CSS for every component.
Benefits of Using Utility Classes
- Consistency: Ensures a uniform look and feel across your application.
- Speed: Reduces the time spent writing custom CSS.
- Maintainability: Simplifies the process of updating styles since changes can be made in one place.
Common Utility Classes
- Spacing
- Text
- Background
- Borders
Spacing Utilities
Use these classes to control margins and padding.
| Class Name | Description |
|---|---|
.m-0 | Margin: 0 |
.m-1 | Margin: 0.25rem |
.m-2 | Margin: 0.5rem |
.p-0 | Padding: 0 |
.p-1 | Padding: 0.25rem |
.p-2 | Padding: 0.5rem |
Text Utilities
Control text alignment, color, and decoration.
| Class Name | Description |
|---|---|
.text-center | Center text |
.text-left | Align text to the left |
.text-right | Align text to the right |
.text-bold | Bold text |
.no-underline | Remove underline from text |
Background Utilities
Set background colors and images.
| Class Name | Description |
|---|---|
.bg-white | Background color: white |
.bg-gray | Background color: gray |
.bg-primary | Background color: primary |
.bg-secondary | Background color: secondary |
Border Utilities
Control border styles and radii.
| Class Name | Description |
|---|---|
.border | Add a border |
.border-none | Remove border |
.rounded | Apply border radius |
.border-solid | Solid border style |
.border-dashed | Dashed border style |
How to Use Utility Classes
To use utility classes, simply add the desired class names to your HTML elements. For example: