background color not inherited-CodePudding

The background and the padding are not applying and the css is not overriding the bootstrap style and when i keep the container style the css display style is not applied.

check the below code:

body{
    background-color: #f5d9d5;
    font-family: 'Nunito' , sans-serif;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="app.css">
  <title>Document</title>
</head>
<body>
    <div >
      <img src="data:image/.." alt="">
      <h4>ping pong score keeper</h4>
      <div >
        <h3><span >0</span> to <span >0</span></h3>
        <p>Use the buttons below to keep score</p>
        <h4>playing to 
          <select  aria-label="Default select example">
          <option value="3">3</option>
          <option value="5">5</option>
          <option value="9">9</option>
          <option value="12">12</option>
        </select></h4>
      </div>
      <button>P1  1</button>
      <button>P2  2</button>
      <button>Reset</button>
    </div>


  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</body>

how the website appears

CodePudding user response：

Try adding !important to the background-color css property. Your CSS property is getting overwritten. adding !important should make the results look like follows:

body{
    background-color: #f5d9d5 !important;
    font-family: 'Nunito' , sans-serif;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="app.css">
  <title>Document</title>
</head>
<body>
    <div >
      <img src="data:image/.." alt="">
      <h4>ping pong score keeper</h4>
      <div >
        <h3><span >0</span> to <span >0</span></h3>
        <p>Use the buttons below to keep score</p>
        <h4>playing to 
          <select  aria-label="Default select example">
          <option value="3">3</option>
          <option value="5">5</option>
          <option value="9">9</option>
          <option value="12">12</option>
        </select></h4>
      </div>
      <button>P1  1</button>
      <button>P2  2</button>
      <button>Reset</button>
    </div>
    

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</body>

CodePudding user response：

Link the Css

<link rel="stylesheet" href="css/style.css">

Then try to refresh the

CodePudding user response：

The bg-light class you are trying to apply to tcontainer is not working since the version of bootstrap that you are using here i.e. bootstrap 3.4.1 does not contain a definition for bg-light and bg-dark. Try updating the bootstrap version, since I don't see a mistake in the code itself.