Hey there! Let’s figure out why that Bootstrap bg-dark class isn’t sticking to your <h1> tag even though other Bootstrap styles (like buttons) are working just fine. Here are some practical fixes to try:

• Check CSS Load Order
  Make sure Bootstrap’s CSS is imported before any custom CSS files in your React project. If your own styles load first, they might override Bootstrap’s classes accidentally. For example, in your index.js:

  // First import Bootstrap's styles
  import 'bootstrap/dist/css/bootstrap.min.css';
  // Then import your custom styles
  import './App.css';
  

• Inspect for Style Priority Conflicts
  Open your browser’s DevTools (press F12), select the <h1> element, and look at the "Styles" tab. If the background-color from bg-dark is crossed out, that means another style with higher specificity is overriding it. Look for:

  • Inline styles directly on the <h1>
  • ID selectors (like #page-header h1)
  • More specific class combinations (like .content-container h1)
    Adjust the conflicting style to lower its specificity or remove the conflicting rule entirely.

• Test with !important (Temporarily)
  As a quick debugging step, you can add !important to Bootstrap’s bg-dark rule in a custom CSS file to see if it forces the style to apply:

  .bg-dark {
    background-color: #212529 !important;
  }
  

  Note: Only use this to confirm the issue—!important should be avoided in production since it makes long-term style maintenance harder.

• Double-Check className Spelling & Case
  Bootstrap class names are case-sensitive. Make sure you didn’t mistype bg-dark (like bg-Dark or bg_dark). Your code shows className="bg-dark text-white p-3" which looks correct, but it’s always worth a quick sanity check!

• Rule Out CSS Isolation Issues
  If you’re using CSS Modules, Styled Components, or another CSS-in-JS solution, Bootstrap’s global classes might be getting scoped or renamed. For CSS Modules, you can reference global Bootstrap classes like this to preserve their original behavior:

  :global(.bg-dark) {
    /* Keep Bootstrap's original styling */
  }
  

Here’s your original component for reference:

import React from 'react'
export default function Home(){
  return<div> 
    <h1 className="bg-dark text-white p-3">Home</h1> 
  </div> 
}

内容的提问来源于stack exchange，提问作者Chandu Singh