Load your custom CSS after Bootstrap's CSS to ensure higher cascade priority. 2. Use more specific selectors like .my-app .btn or .btn.btn-primary to override Bootstrap’s default styles effectively. 3. Use !important sparingly, only when necessary, such as when overriding utility classes like .bg-primary. 4. For heavy customization, use Bootstrap with Sass by overriding variables before importing Bootstrap to gain full control. 5. Never modify Bootstrap’s source files directly; instead, use custom CSS or Sass to preserve changes during updates. The key is leveraging cascade order and specificity so your styles take precedence, ensuring reliable and maintainable overrides.

Overriding Bootstrap CSS styles is a common need when you want to customize the default look of your site without modifying Bootstrap’s source files directly. Here’s how to do it effectively and avoid common pitfalls.

1. Load Your Custom CSS After Bootstrap

The most important rule: your custom styles must come after Bootstrap’s CSS in the HTML .

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="your-custom-styles.css" rel="stylesheet">

This ensures your CSS has a higher cascade priority, allowing it to override Bootstrap's rules.

2. Use More Specific Selectors

Bootstrap often uses class-based selectors (e.g., .btn, .card-title). To override them, increase specificity.

? This might not work:

.btn {
  background-color: red;
}

? This will work better:

.btn-custom {
  background-color: red;
}

Or, use higher specificity:

.btn.btn-primary {
  background-color: red;
}

Even better:

.my-app .btn.btn-primary {
  background-color: red;
}

Adding a parent container class (like .my-app) helps scope your overrides and increases specificity without needing !important.

3. Use !important Sparingly (But It’s Okay When Necessary)

Sometimes Bootstrap uses utility classes with high specificity (e.g., .bg-primary, .text-center). In those cases, you may need !important — but use it as a last resort.

? Example:

.bg-custom-red {
  background-color: #d32f2f !important;
}

This is acceptable for utility overrides, but avoid it in component styling.

4. Customize via Sass (Best Practice for Heavy Customization)

If you're using Bootstrap via Sass (recommended for full control), import Bootstrap and override variables before the import.

// _variables.scss
$primary: #d32f2f;
$border-radius: 8px;

// Import Bootstrap after variables
@import "bootstrap/scss/bootstrap";

You can also override component styles after importing, or extend Bootstrap classes using @extend.

This method gives you full control and avoids specificity wars.

5. Avoid Modifying Bootstrap Source Files

Never edit the original bootstrap.css or bootstrap.min.css. Your changes will be lost when you update Bootstrap.

Instead:

• Use a custom CSS file
• Or use Sass to build a custom version

Summary: Best Practices

• ? Load custom CSS after Bootstrap
• ? Use more specific selectors (e.g., .my-class .btn)
• ? Use !important only when needed (e.g., for utilities)
• ? Customize with Sass for full control
• ? Don’t edit Bootstrap’s source files

Basically, it’s about cascade order and specificity — structure your CSS so your rules win the browser’s styling contest.

The above is the detailed content of How to override Bootstrap CSS styles?. For more information, please follow other related articles on the PHP Chinese website!